如何浮动3 div并排使用CSS?

我知道如何让2个divs并排浮动，简单地浮动一个到左边，另一个到右边。

但是如何用3个div来做这个，或者我应该只用表来做这个目的吗?

当前回答

尝试在样式中添加“display: block”

<style>
   .left{
          display: block;
          float:left; 
          width:33%;
    }
</style>


<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>

2013-03-13 13:08:54

其他回答

这与你为两个div所做的方式相同，只是将第三个div浮动到左或右。

<style>
  .left{float:left; width:33%;}
</style>

<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>

2010-01-28 18:02:53

你可以为它们设置float: left，并将宽度设置为33.333%

2010-01-28 18:02:50

我没有看到bootstrap的答案，所以不管怎样

<div class="col-xs-4">Left Div</div>
<div class="col-xs-4">Middle Div</div>
<div class="col-xs-4">Right Div</div>
<br style="clear: both;" />

让Bootstrap算出百分比。以防万一，我想把两个都清除掉。

2017-02-01 20:42:16

下面是我如何在<footer>元素中做类似的事情:

<div class="content-wrapper">

    <div style="float:left">
        <p>&copy; 2012 - @DateTime.Now.Year @Localization.ClientName</p>
    </div>

    <div style="float:right">
        <p>@Localization.DevelopedBy <a href="http://leniel.net" target="_blank">Leniel Macaferi</a></p>
    </div>

    <div style="text-align:center;">
        <p>☎ (24) 3347-3110 | (24) 8119-1085&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;✉ @Html.ActionLink(Localization.Contact, MVC.Home.ActionNames.Contact, MVC.Home.Name)</p>
    </div>

</div>

CSS:

.content-wrapper
{
    margin: 0 auto;
    max-width: 1216px;
}

2013-01-11 20:30:50

<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 ! !:)

2012-07-20 03:11:57

如何浮动3 div并排使用CSS?

推荐文章

最新文章

标签