列不纏繞浮動元素

.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

列不纏繞浮動元素

回答

相關問題