列不缠绕浮动元素

.container { 
 
\t background-color: lightgreen; 
 
} 
 

 
.column { 
 
\t width: 31.33%; 
 
\t background-color: green; 
 
\t float: left; 
 
\t margin: 0 1%; 
 
} 
 

 
.column:last-child { 
 
\t float: none; 
 
}

<div class='container'> 
 
    <div class='column'>Column 1</div> 
 
    <div class='column'>Column 2</div> 
 
    <div class='column'>Column 3Column 3Column 3Column 3Column 3Column 3Column 3</div> 
 
</div>

为什么第三列不是环绕像这样：

有足够的空间为它的浮动元素的右边。

来源

2016-03-12 Robert Rocha

添加宽度：100％到.column：最后一个孩子。

.column:last-child { 
    float: none; 
    width: 100%; 
}

来源

2016-03-12 17:34:28 Morven

这样做的最后一列的浮低于COLUMN1/2的内容的缺点，如果你不希望behavoiur检查[我的答案]（HTTP ：//artackoverflow.com/a/35960999/4068027） – Aides

@Aides但是，这正是OP想要的，甚至一个图像被添加来显示 – LGSon

谢谢。你能解释为什么会发生上述情况吗？ –

答案之所以出现这种情况是相当多的answer从this

Here's a fiddle表明第三列是浮动栏的下方，它的文本内容仅仅是（在这种情况下，下同）缠绕在浮动列。

（只是做了一些背景半透明）

.column { 
    width: 31.33%; 
    background-color: rgba(0, 255,0, .5); 
    float: left; 
    margin: 0 1%; 
} 

.column:last-child { 
    float: none; 
    background: red; 
}

来源

2016-03-13 02:28:05

列不缠绕浮动元素

回答

相关问题