我知道如何让2个divs并排浮动,简单地浮动一个到左边,另一个到右边。
但是如何用3个div来做这个,或者我应该只用表来做这个目的吗?
我知道如何让2个divs并排浮动,简单地浮动一个到左边,另一个到右边。
但是如何用3个div来做这个,或者我应该只用表来做这个目的吗?
当前回答
把它们都飘到左边
确保所指定的宽度都能适合它们的容器(无论是另一个div还是窗口),否则它们将自动换行
其他回答
尝试在样式中添加“display: block”
<style>
.left{
display: block;
float:left;
width:33%;
}
</style>
<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
<br style="clear: left;" />
有人在上面发布的代码,成功了!! 当我在关闭容器DIV之前粘贴它时,它有助于清除所有后续DIVs与我在顶部并排创建的DIVs重叠!
<div>
<div class="left"></div>
<div class="left"></div>
...
...
<div class="left"></div>
<!-- then magic trick comes here -->
<br style="clear: left;" />
</div>
tadaa ! !:)
<style>
.left-column
{
float:left;
width:30%;
background-color:red;
}
.right-column
{
float:right;
width:30%;
background-color:green;
}
.center-column
{
margin:auto;
width:30%;
background-color:blue;
}
</style>
<div id="container">
<section class="left-column">THIS IS COLUMN 1 LEFT</section>
<section class="right-column">THIS IS COLUMN 3 RIGHT</section>
<section class="center-column">THIS IS COLUMN 2 CENTER</section>
</div>
这种方法的优点是你可以设置每一列的宽度,只要你保持在100%以下,如果你使用3 x 30%,剩下的10%被分割为5%的分隔空间列之间
@Leniel这个方法很好,但是你需要为所有浮动div添加宽度。我会说,让它们宽度相等或分配固定宽度。类似的
.content-wrapper > div { width:33.3%; }
您可以为每个div分配类名,而不是添加内联样式,这不是一个好的实践。
请确保使用clearfix div或clear div,以避免下面的内容仍然低于这些div。
你可以在这里找到如何使用clearfix div的详细信息
把它们都飘到左边
确保所指定的宽度都能适合它们的容器(无论是另一个div还是窗口),否则它们将自动换行