Question

我连续有三个盒子，每个盒子都有不同的内容。它们的高度不一样。是否有一个优雅的解决方案，不涉及绝对定位动态生成每个框上相同的高度

我不想使用max-height，因为它未来不会动态。

Answer 1

如果您只定位现代浏览器，解决此问题的最佳方法是使用flexbox。例如：

<div style='display: flex; flex-direction: row; color: #fff;'>
    <div style='flex: 1; background:red;'>
        <p>Hi</p>
    </div>
    <div style='flex: 1; background:green'>
        <p>Hi</p>
        <p>Hi</p>
        <p>Hi</p>
        <p>Hi</p>
    </div>
     <div style='flex: 1; background:blue'>
        <p>Hi</p>
    </div>
</div>

http://jsfiddle.net/nofmdho4/1/

Answer 2

您可以使用显示表：

<div style='display: table; color: #fff;  width: 100%'>
    <div style='display: table-cell; background:red;'>
        <p>Hi</p>
    </div>
    <div style='display: table-cell; background:green'>
        <p>Hi</p>
        <p>Hi</p>
        <p>Hi</p>
        <p>Hi</p>
    </div>
     <div style='display: table-cell; background:blue'>
        <p>Hi</p>
    </div>
</div>

http://jsfiddle.net/nofmdho4/

Answer 3

尝试表布局，如下所示：

＆＃13;

#css-table {
  display: table;
}
#css-table .col {
  display: table-cell;
  width: 25%;
  padding: 10px;
}
#css-table .col:nth-child(even) {
  background: #ccc;
}
#css-table .col:nth-child(odd) {
  background: #eee;
}

＆＃13;

<div id="css-table">
  <div class="col">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
  <div class="col">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </div>
  <div class="col">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
  <div class="col">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </div>
</div>

＆＃13;

优雅的解决方案相同的高度盒

3 个答案: