html列適合內容，但並排高度（沒有jQuery）

我有3個不同數量的內容的div。我希望divs因爲背景而在高處相匹配。我的問題是如果可能的話，如何用純html/css而不使用jQuery/Javascript來實現。html列適合內容，但並排高度（沒有jQuery）

小時，每個div變成12列，因此它們的高度符合內容。中等時，綠色和藍色的高度相同。大時，灰色框與藍色和綠色div的高度相匹配。

.col-1 { 
 
    background-color: blue; 
 
} 
 
.col-2 { 
 
    background-color: green; 
 
} 
 
.col-3 { 
 
    background-color: grey; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet"/> 
 
<div class="row collapse"> 
 
    <div class="large-3 small-12 columns"> 
 
    <div class="row collapse"> 
 
     <div class="small-12 medium-6 large-12 columns col-1"> 
 
     The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 
 
     </div> 
 
     <div class="small-12 medium-6 large-12 columns col-2"> 
 
     The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="large-9 small-12 columns col-3"> 
 
    The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 
 
    </div> 
 
</div>

目前，爲了實現這一目標，我一直在使用jQuery搶的div自然的高度，並分配的較大高度取決於窗口大小。每次調整窗口大小時都會調用它。

我希望能夠實現div的這種安排，同時允許div的高度像上圖中一樣對齊的html/css解決方案。

來源

2017-04-25 Haitham Maya

如果你想顯示影像中的邊距和補你將不得不改變你的標記。 –

您可以添加以下規則。它似乎工作。

.row.collapse { 
    display:flex; 
    flex-wrap:wrap; 
}

.col-1 { 
 
    background-color: blue; 
 
} 
 
.col-2 { 
 
    background-color: green; 
 
} 
 
.col-3 { 
 
    background-color: grey; 
 
} 
 

 
.row.collapse { 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet"/> 
 
<div class="row collapse"> 
 
    <div class="large-3 small-12 columns"> 
 
    <div class="row collapse"> 
 
     <div class="small-12 medium-6 large-12 columns col-1"> 
 
     The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 
 
     </div> 
 
     <div class="small-12 medium-6 large-12 columns col-2"> 
 
     The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="large-9 small-12 columns col-3"> 
 
    The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 
 
    </div> 
 
</div>

來源

2017-04-25 15:30:02

感謝您的解決方案！我最終使用了基礎的'align-stretch'css類，它提供了'flex-wrap'解決方案。這非常有幫助！ –

退房CSS網格。它在字面上只在瀏覽器（無需啓用標誌）中可用（截至編寫此答案時），因此這是一個「自擔風險」的答案，但您可以考慮使用它。它的佈局很簡單，IE/Edge使用的舊版本應該是可行的。

http://caniuse.com/#feat=css-grid

.wrapper { 
 
    display: grid; 
 
    grid-gap: 10px; 
 
} 
 
@media screen and (min-width: 768px) { 
 
    .wrapper { 
 
    grid-template-columns: 30% 70%; 
 
    } 
 
} 
 
.col-1 { 
 
    background-color: blue; 
 
} 
 
.col-2 { 
 
    background-color: green; 
 
} 
 
.col-3 { 
 
    background-color: grey; 
 
} 
 
@media screen and (min-width: 768px) { 
 
    .col-1 { 
 
    grid-column: 1; 
 
    grid-row: 1; 
 
    } 
 
    .col-2 { 
 
    grid-column: 2; 
 
    grid-row: 1; 
 
    } 
 
    .col-3 { 
 
    grid-column: 1/span 2; 
 
    grid-row: 2; 
 
    } 
 
} 
 
@media screen and (min-width: 1024px) { 
 
    .col-1 { 
 
    grid-column: 1/2; 
 
    grid-row: 1; 
 
    } 
 
    .col-2 { 
 
    grid-column: 1/2; 
 
    grid-row: 2; 
 
    } 
 
    .col-3 { 
 
    grid-column: 2; 
 
    grid-row: 1/span 2; 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet"/> 
 
<div class="wrapper"> 
 
    <div class="col-1"> 
 
    The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 
 
    </div> 
 
    <div class="col-2"> 
 
    The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 
 
    </div> 
 
    <div class="col-3"> 
 
    The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 
 
    </div> 
 
</div>

資源：

來源

2017-04-25 15:33:04 LocalPCGuy

約瑟夫Marikle的回答指出，簡單地增加display:flex;和flex-wrap:wrap您.row.collapse將獲得所需的定位。

他的答案沒有告訴你的是，這個解決方案中更難的部分是讓邊距和填充正確顯示，就像在圖像中一樣。以下是您需要添加的內容：

將每個元素的內容包裝在通用包裝中;
將display:flex + flex-direction:column添加到包裝及其父列，以及將flex-grow:1添加到包裝;
添加填充到外部.row.collapse;
爲包裝添加邊距;
將background-color從列移動到包裝。

就是這樣。概念證明：https://jsfiddle.net/websiter/xho9nzsk/

來源

2017-04-25 16:02:50

如果你想這樣做的「基礎的方法」可以使用equalizer

來源

2017-04-28 06:34:06 nivesnine

html列適合內容，但並排高度（沒有jQuery）

回答

相關問題