目前我正在学习HTML/CSS,我想用Windows 8风格(metro风格)创建一个博客.但我在禁用溢出时遇到问题.我正在使用<body>html中的表格,每个表格数据都有固定大小.但是每当我在表中的一行中添加一个单元格时,如果该行在x方向上溢出,那么该单元格会自动跳转.
反正有没有避免这个？
这是我的代码的一部分:
CSS:
/***Creating the dashboard in metro style***/
.dashboard {
position: fixed;
top: 10.5em;
left: 0;
padding-top: 1em;
padding-left: 1em;
padding-bottom: 1em;
border: 5px solid white;
overflow-x: scroll;
overflow-y:hidden;
}
td {
border: 3px solid yellow;
float: left;
margin: 0;
color: black;
width: 300px;
font-size: 1.5em;
cursor: pointer;
position: relative;
background-color: white;
}
.tile-1{
background-color: #56d9c9;
color: white;
}
HTML:
<div class="dashboard">
<table style="border: 1px solid red">
<tr>
<td><p>I just got you babe 1</p></td>
<td><p>I just got you babe 2</p></td>
<td><p>I just got you babe 3</p></td>
<td><p>I just got you babe 4</p></td>
<td><p>I just got you babe 5</p></td>
<td><p>I just got you babe 6</p></td>
</tr>
<tr>
<td><p>I just got you babe 7</p></td>
<td><p>I just got you babe 8</p></td>
<td><p>I just got you babe 9</p></td>
<td><p>I just got you babe 10</p></td>
<td><p>I just got you babe 11</p></td>
<td><p>I just got you babe 12</p></td>
</tr>
<tr>
<td><p>I just got you babe 13</p></td>
<td><p>I just got you babe 14</p></td>
<td><p>I just got you babe 15</p></td>
<td><p>I just got you babe 16</p></td>
<td><p>I just got you babe 17</p></td>
<td><p>I just got you babe 18</p></td>
<td><p>I just got you babe 19</p></td>
<td><p>I just got you babe 20</p></td>
</tr>
</table>
</div>
您所追求的是一个类似于表格的布局，而不是真正的表格。表用于表格数据，而不用于布局。
话虽如此，您可以添加更多的块而不会轻易中断水平滚动，而无需对您的思维布局进行太多更改。这是一个例子：
演示：http : //jsfiddle.net/abhitalks/HSE4e/2/
HTML：
保持与布局相似，唯一的区别是您拥有divs 而不是表，行和单元格。
<div class="wrap"> <!-- wrapper to contain the layout -->
<div class="table"> <!-- this holds your blocks and scrolls -->
<div class="row"> <!-- this allows you multiple rows -->
<div class="content"></div> <!-- actual content -->
<div class="content"></div>
</div>
<div class="row">
<div class="content"></div> <!-- by having rows, -->
<div class="content"></div> <!-- you can have differing number of.. -->
<div class="content"></div> <!-- ..content blocks in each row -->
</div>
...
</div>
</div>
CSS：
* {
margin: 0; padding: 0; box-sizing: border-box; /* reset */
}
html, body {
overflow: hidden;
width: 100%; /* restrict the page width to viewport */
}
.wrap {
width: 100%; height: 200px; /* restrict width to viewport */
overflow-y: hidden; /* hide vertical scrollbar */
overflow-x: scroll; /* show only horizontal scrollbar */
}
.table {
width: 1000px; /* arbitrarily high width to allow scroll */
height: 100%; /* restrict height to the container */
}
.row {
margin: 8px 8px; /* visually separate rows */
}
.content {
display: inline-block; /* make content blocks flow inline */
width: 100px; height: 50px; /* any height/width you want */
margin: 0px 8px; /* visually separate content blocks */
}
因此，使用与您相同的思维模型，只需考虑CSS而不是表格。
通过这种安排，每一行中可以具有不同数量的内容块。您可以在可用高度中容纳尽可能多的行。
使用Javascript，您还可以操纵鼠标滚轮来水平滚动。