自動調整高度的兩列布局

我在嘗試製作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

自動調整高度的兩列布局

回答

相關問題