关于css：如何在固定宽度DIV中获取浮动DIV以水平继续？

How to get Floating DIVs inside fixed-width DIV to continue horizontally?

我有一个固定高度和宽度(275x1000像素)的容器分区。在这个分区中，我要放置多个浮动分区，每个分区的宽度为300px，并有一个水平(x轴)滚动条显示，允许用户向左和向右滚动查看所有内容。

这是迄今为止我的CSS：

1
2
3
4
5
6
7
8
9
10
11
12

div#container {
height: 275px;
width: 1000px;
overflow-x: auto;
overflow-y: hidden;
max-height: 275px;
}

div#container div.block {
float: left;
margin: 3px 90px 0 3px;
}

问题是浮动分隔符不会继续超过容器的宽度。在放置三个浮动DIV后，它们将继续在下面。如果我把overflow-y改为auto，垂直滚动条就会出现，我可以向下滚动。

我如何才能改变这个，使浮动的潜水器继续下去，而不去彼此下面？

1
2
3
4
5
6
7
8
9
10
11

div#container {
height: 275px;
width: 1000px;
overflow: auto;
white-space: nowrap;
}

div#container span.block {
width: 300px;
display: inline-block;
}

这里的技巧是，只有在Internet Explorer中设置为inline block时，默认情况下行为为inline的元素才能正常工作，因此内部容器需要而不是。

相关讨论

您需要一个大宽度的额外的DIV来包含块，然后它们将扩展到比容器DIV更宽的范围，而不是下拉到一个新行。

HTML：

1
2
3
4
5
6
7
8
9

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#container {
height: 275px;
width: 1000px;
overflow-x: auto;
overflow-y: hidden;
max-height: 275px;
}
#container #width {
width:2000px; /* make this the width you need for x number of blocks */
}
#container div.block {
float: left;
margin: 3px 90px 0 3px;
}

相关讨论

1
2
3
4
5
6
7
8

#row {
white-space: nowrap; /* important */
overflow: auto;
}

.items {
display: inline-block;
}

这里的技巧是父元素的"white space:nowrap"属性，它简单地告诉所有子元素水平继续，以及子元素的"display:inline block"属性。您不需要添加任何其他属性来使此工作。

JS小提琴：http://js fiddle.net/2c4jfetf/

用另一个宽度更宽的分区包住浮动分区。

我的前任：

分频宽度：850pxGRIDVIEW模板栏普通项

1 2	<span class="buttonspanlt"></span><span class="buttonspanrt"></span> <span style="display:none;float:left;clear:left;" id="spangrdCancel" runat="server"><span class="buttonspanlt"></span><span class="buttonspanrt"></span></span>

结束项模板结束模板列结束GRIDVIEW结束div

按钮有左中(实际按钮)右跨，其中没有浮动，因为有固定宽度的外部分区。

我不得不在按钮外使用宽度为140px的附加DIV，然后在itemtemplate内使用。

希望这有帮助！！！！

谢谢您哈里什

听起来你在和Div一起做画廊？

你用这个沙发床做什么？

使用一个跨度在li内的ul/li可能会更容易，以获得相同的效果，而不需要浮动div的所有头痛。

表格解决方案应该很好地工作。

如果不想使用表格，也可以将所有.block div放在容器内的另一个div中，并在加载页面后使用javascript在div之间给出一个固定的计算宽度。

当然，如果你已经知道你有多少个.block/如果数字是固定的，你可以用css给"in between div"一个固定的宽度。

相关讨论

将要滚动的div放入表格中，如下所示：

1
2
3
4
5
6
7

编辑：我尝试了这些建议的解决方案中的3个——它们在Google Chrome中都可以正常工作——但是第一个(container1)在IE中不起作用(Go Figure)——所以SPAN解决方案得到了我的投票：—：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

<html>
<body>
<style>
div#container1
{
height: 275px;
width: 100%;
overflow: auto;
white-space: nowrap;
border:2 solid red;
}

div#container1 div.block
{
width: 300px;
height: 200px;
display: inline-block;
border: 1 solid black;
}

div#container2
{
height: 275px;
width: 100%;
overflow: auto;
white-space: nowrap;
border:2 solid red;
}

div#container2 span.block
{
width: 300px;
height: 200px;
display: inline-block;
border: 1 solid black;
}

div#container3
{
height: 275px;
width: 100%;
overflow: auto;
white-space: nowrap;
border:2 solid red;
}

div#container3 div.block
{
width: 300px;
height: 200px;
display: inline-block;
border: 1 solid black;
}

</style>
<p>

Cell 1 
Cell 2 
Cell 3 
Cell 4 
Cell 5 

<p>

<span class='block'>Cell 1 </span>
<span class='block'>Cell 2 </span>
<span class='block'>Cell 3 </span>
<span class='block'>Cell 4 </span>
<span class='block'>Cell 5 </span>

<p>

<table><tr>
<td>Cell 1 </td>
<td>Cell 2 </td>
<td>Cell 3 </td>
<td>Cell 4 </td>
<td>Cell 5 </td>
</tr></table>

</body>
</html>

编辑2：

我通过browsershots.org运行了这个测试页，以了解不同的浏览器如何处理它。结论：浏览器兼容性差。-)

http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm

表解决方案的工作频率更高——但是SPAN选项(更干净)只在我从未听说过的浏览器上中断。-)

相关讨论

用途：

1
2
3

div#container {
overflow: auto;
}

或者在三个分隔符下面添加一个清除分隔符，样式为：

1
2
3

{
clear: both
}