Question

我无法通过Bootstrap制作某种feaux-columns效果。从理论上讲，我认为继承同一行内另一列的高度相对容易 - 但实际上它似乎并不那么容易。

<div class="row slideshow">
 <div class="col-md-3 col-1">
  col 1 contents
  col 1 contents<br />
  col 1 contents<br />
  col 1 contents<br />
  col 1 contents<br />
  col 1 contents<br />
  col 1 contents<br />
 </div>
 <div class="col-md-6 col-2">
  <div class="col-md-10">
   <div class="slider-caption">
    col 2 contents<br />
    col 2 contents<br />
   </div>
  </div>
 </div>
 <div class="col-md-3 col-3">
  col 3 contents
 </div>
</div>

在jsfiddle中，我没有这样的造型，除了确定的背景颜色以便可视化高度。但问题是，我怎样才能让col-3继承这一行中最高容器的高度（目前 - 因为内容 - col-1）？我试着将它的高度定义为100％，因为我认为这将是父行的100％。似乎不是。

非常感谢任何提示

Answer 1

你可以试试这个。这组样式假设col-1和col-2具有相同的大小。它不是很灵活，也没有得到很好的支持。在我检查其他解决方案的同时试试这个。

＆＃13;

.slideshow {
    height:400px;
    display: flex;
    flex-flow: column wrap;
}

.col-1 {
    background-color: yellow;
    flex: 1;
}
.col-2 {
    background-color: blue;
    
}
.col-3 {
    background-color: red;
    flex: 1;
}

＆＃13;

Answer 2

如果您不需要＆lt; IE11支持然后你可以在幻灯片容器上使用display：flexbox;

.slideshow {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
}

http://jsfiddle.net/zwcy0nur/3/

否则你可以使用表格或将div显示为表格单元格

从行内的最高列继承高度

2 个答案: