Two-Columns and Equal Height
-
29-06-2021 - |
سؤال
With this markup:
<div class="wrapper">
<article>A</article>
<article>B</article>
<article>C</article>
<article>D</article>
<article>E</article>
<article>F</article>
</div>
How can I style it to have:
|-------|---------|
| | |
| A | B |
| | |
|-------|---------|
| | |
| C | D |
| | |
|-------|---------|
| | |
| E | F |
| | |
|-------|---------|
such that each pair should have an equal height? The height should come from the article that has the longer content, i.e. if the content in C is longer than D, then D should match the height of C.
What I have tried so far is the good old float, but since it's floated then it has variable heights that depends on contents.
I have also googled similar things but what I have found are fixed-height columns that just hide extra contents.
المحلول
Use equal height function for that that will worl
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".recent-article"));
});
// HTML
<div class="wrapper">
<article class="recent-article">A</article>
<article class="recent-article">B</article>
<article class="recent-article">C</article>
<article class="recent-article">D</article>
<article class="recent-article">E</article>
<article class="recent-article">F</article>
</div>
نصائح أخرى
Better you have to table for this.
<div class="wrapper">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<article class="recent-article">A</article>
</td>
<td>
<article class="recent-article">B</article>
</td>
</tr>
<tr>
<td>
<article class="recent-article">C</article>
</td>
<td>
<article class="recent-article">D</article>
</td>
</tr>
<tr>
<td>
<article class="recent-article">E</article>
</td>
<td>
<article class="recent-article">F</article>
</td>
</tr>
</table>
لا تنتمي إلى StackOverflow