Clearfix不能使用固定寬度的列

我是Bootstrap的新手，我遇到clearfix問題。我試圖設計一個網站，其中包含3個內容欄（高度可變）和一個固定寬度的第4欄用於廣告。Clearfix不能使用固定寬度的列

<div class="container-fluid"> 
    <!-- ad column with fixed width 300px --> 
    <div class="col-fixed-width"></div> 

    <!-- content columns --> 
    <div class="col-md-4"></div> 
    <div class="col-md-4"></div> 
    <div class="col-md-4"></div> 

    <div class="clearfix"></div> 

    <div class="col-md-4"></div> 
    <div class="col-md-4"></div> 
    <div class="col-md-4"></div> 
</div>

類山坳固定看起來像這樣：

.col-fixed { 
    width: 318px; 
    float: right; 
}

其他的都是標準的引導。由於我的廣告欄的高度比內容元素的高度大得多，因此第一行和第二行之間存在很大差距。我該如何解決這個問題？我可以之一：

忽略關於使用clearfix具體divs？
使用不同的網格佈局？

在此先感謝您的幫助或提示！

來源

2016-12-06 Ricardo

請建立後做了完整的CSS :)片段，你的問題是更好的理解和解決。 –

一個問題的小提琴就像一個牧師的聖經。沒有他們的同行，他們都沒有意義。 ;） – nashcheez

好的，我很抱歉。這裏是小提琴https://jsfiddle.net/eosvk7nm/1/有關我的問題的任何進一步說明，請參閱HTML註釋。 – Ricardo

好的，我解決了我的問題。這樣做的訣竅：

.col-fixed { 
    width: 160px; 
    float: right; 
} 

.contentrow { 
    width:calc(100% - 160px); 
    float: left; 
} 

.contentcol { 
    padding-left: 2px; 
    padding-right: 2px; 
}

我還有一個固定寬度的廣告欄。但我加了float：left;到我的內容欄。

參見：https://jsfiddle.net/tprarmjc/1/

但是我無法解釋爲什麼它解決了這個問題？也許有人可以向我解釋。

來源

2016-12-12 23:33:48 Ricardo

Clearfix不能使用固定寬度的列

回答

相關問題