Question

我是Bootstrap的新手，我遇到clearfix的问题。我正在尝试设计一个包含3个内容列（可变高度）和第4列具有固定宽度的网站进行广告宣传。

<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看起来像这样：

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

其他一切都是标准的引导程序。因为我的广告栏的高度远大于内容元素的高度，所以在第一行和第二行之间存在大的间隙。我该如何解决这个问题？我可以：

忽略有关divs？

clearfix

使用不同的网格布局？

提前感谢任何帮助或暗示！

Answer 1

好的，我解决了我的问题。这就是诀窍：

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

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

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

我还有一个固定宽度的广告栏。但我添加了浮动：左;到我的内容栏。

请参阅：https://jsfiddle.net/tprarmjc/1/

但是我无法解释为什么它解决了这个问题？也许有人可以向我解释。

Clearfix无法使用固定宽度列

1 个答案: