自动调整高度的两列布局

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

我的源代码如下所示：

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

<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>

现在，正如我所说，我想调整左栏的高度，它始终是相同的高度，正确的一。顶部和底部填充。

我正在努力解决这个问题，找不到合适的方法来解决我的问题。

来源

2015-02-06 user2720132

是否页面后列变化的高度已经被加载？你可以使用jQuery/JavaScript来修复它。 – 2015-02-06 12:05:12

可能的重复：http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height – ketan 2015-02-06 12:06:41

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

试试这个

来源

2015-02-06 11:44:05 GasKa

尽管这段代码可能解决这个问题，[包括解释]（http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers）确实有助于提高你的文章的质量。请记住，您将来会为读者回答问题，而这些人可能不知道您的代码建议的原因。 – msrd0 2015-02-06 13:51:27

使用表格格式，而不是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;}

来源

2015-02-06 13:10:52

你可以把同一个min-height或max-height到这两个的div。这取决于你想达到什么。

来源

2015-02-06 13:17:52 DrNio

您可以使用较新的CSS Flexbox属性轻松完成此操作。这里是一个伟大的教程，是你要找的东西接近底部：

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

来源

2015-02-06 13:25:16 Jeff

自动调整高度的两列布局

回答

相关问题