Question

I have some elements of different heights which I need to align on 2 columns in the the following order:

1,2
3,4
5,6

I need the divs to 'touch each other', meaning that the bottom of #1 should touch the top of #3, no matter the size of #2.

So far I tried to to it this way:

HTML

<div class="block block--1">1</div>
<div class="block block--2">2</div>
<div class="block block--3">3</div>
<div class="block block--4">4</div>
<div class="block block--5">5</div>
<div class="block block--6">6</div>

CSS:

.block {
    display: inline-block;
    float: left;
    width: 50%;
}
.block:nth-child(odd) {
    clear: left;
}
.block--1 {
    background: red;
    height: 100px;
}
.block--2 {
    background: blue;
    height: 150px;
}
.block--3 {
    background: yellow;
    height: 200px;
}
.block--4 {
    background: green;
    height: 100px;
}
.block--5 {
    background: grey;
    height: 200px;
}
.block--6 {
    background: orange;
    height: 300px;
}

But this doesn't work as #3 doesn't touch #1. You can see it here: http://jsfiddle.net/oynrv880/1/

I have tried using the column-count property as well but it displays the item is the wrong order.

How can I do this?

Many thanks!

Answer 1

您可以在不修改HTML的情况下获得的最接近的内容可能是这样的：

你可以让奇数浮动向左浮动，偶数浮动向右移动，并清除它们各自的一侧。

div {
    width: 50%;
    float: left;
    clear: left;
}
div:nth-child(even) {
    float: right;
    clear: right;
}

JSFiddle

Answer 2

<div style="float:left; width:50%;">
    <div class="block block--1">1</div>
    <div class="block block--3">3</div>
    <div class="block block--6">6</div>
</div>
<div style="float:left; width:50%;">
    <div class="block block--2">2</div>
    <div class="block block--4">4</div>
    <div class="block block--5">5</div>
</div>

Remove all CSS attibutes of .block

Answer 3

这样的事情你好吗？

.block {
    width: 100%;
}
.block:nth-child(odd) {
    clear: left;
}
.block--1 {
    background: red;
    height: 100px;
}
.block--2 {
    background: blue;
    height: 150px;
}
.block--3 {
    background: yellow;
    height: 200px;
}
.block--4 {
    background: green;
    height: 100px;
}
.block--5 {
    background: grey;
    height: 200px;
}
.block--6 {
    background: orange;
    height: 300px;
}

.first, .second {
  float: left;
  width: 50%;
}

<div class="first">
  <div class="block block--1">1</div>
  <div class="block block--3">3</div>
  <div class="block block--5">5</div>
</div>

<div class="second">
  <div class="block block--2">2</div>
  <div class="block block--4">4</div>
  <div class="block block--6">6</div>
</div>

Display items in colums with a specific order

3 个答案: