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不能使用固定宽度的列

回答

相关问题