Given markup like this:
<div class="a">A</div>
<div class="b">B</div>
<div class="a">A</div>
<div class="b">B</div>
<div class="a">A</div>
<div class="b">B</div>
Is it possible to style this document to look like this:
|-------|---------|
| | |
| A | B |
| | |
|-------|---------|
| | |
| A | B |
| | |
|-------|---------|
| | |
| A | B |
| | |
|-------|---------|
(and if the content in A or B is longer, its neighbor will grow to match its height)…
without any additional markup?
I understand that giving .a
and .b
a display
value of table-cell
would just make this one big row.
What’s the solution?
Not without flexbox, which hasn’t landed in several major browsers yet, seems to be the consensus.