Question

我不想在这里求助，但经过几个小时的挫折之后，我觉得我必须这样做！

我有两个（可能更多）div，我想要并排。他们的父div有一个固定的宽度和overflow:hidden所以我们一次最多可以看到一个div。问题是他们不会并排堆叠！我试过float:left和display:inline无济于事。

我有一个JSFiddle示例here

非常感谢任何帮助！

Answer 1

他们每个人需要display:inline-block，父母需要：white-space:nowrap所以他们全部都在一行。

示例：

http://jsfiddle.net/QBhmF/15/

Answer 2

尝试显示：inline-block

Answer 3

试

位置：相对浮动：左

Answer 4

你需要div

#tab_container{
    width:2000px;
}

然后给你的花车足够的空间并排浮动，目前它们没有足够的空间，因此默认的浮动行为迫使它们到达下一行。

http://jsfiddle.net/QBhmF/10/

Answer 5

你有没看过，例如这里： How to float 3 divs side by side using CSS

Answer 6

我头顶的Ioff的样板解决方案可以如下：

<div class = 'container'>

<div class = 'floater'>Some text</div>
<div class = 'floater'>Some other text</div>

<div class = 'clearout'></div>

</div>

div.container {

width: 400px;
border: 1px solid blue;

}

div.floater {

float: left; 
width: 48%;
border: 1px solid red;
margin: 2px;

}

div.clearout {

clear: both; 
height: 0px; 
visibility: hidden; 
width: 100%;

}

任何应用于浮动的边距都可能弄乱布局。如果你可以预测它们的尺寸，浮子也可以有绝对尺寸而不是百分比。

HTH，

在CSS中并排堆叠Div

6 个答案: