Question

我正在尝试制作2列布局。左列应自动将其高度调整到右列。所以两列的高度都相同。

我的源代码如下所示：

＆＃13;

.row {clear: both; max-width: 1240px; margin: 0 auto;}
.col-6 {width: 50%; float: left; position: relative;}
.space-default {padding: 200px 0;}

＆＃13;

<div class="row">
  <div class="col-6">
    <div class="space-default">
      left column
    </div>
  </div>
  <div class="col-6">
    <div class="space-default">
      right column
    </div>
  </div>
</div>

＆＃13;

正如我所说，我想调整左栏的高度，使其始终与右栏的高度相同。使用顶部和底部填充。

我正在努力解决这个问题，无法找到解决问题的正确方法。

Answer 1

<div class="row">
  <div class="col-6">
<div class="space-default">
  left column
</div>
<div class="space-default">
  right column
  </div>
 </div>
 </div>

试试这个

Answer 2

使用表格格式代替float:left

.row {clear: both; max-width: 1240px; margin: 0 auto; display:table}
.col-6 {width: 50%; display:table-cell}
.space-default {padding: 200px 0;}

Answer 3

您可以为两个div提供相同的min-height或max-height。这取决于你想要达到的目标。

Answer 4

使用较新的CSS Flexbox属性，您可以轻松完成此操作。这是一个很棒的教程，您正在寻找的内容接近底部：

http://www.paulund.co.uk/css-flexbox

两列布局，自动高度

4 个答案: