通过固定数量的CSS中断项目？

Question

我得到了以下物品清单：

<div class="break-3">
<ul>
    <li>
    <div class="title">A</div>
    <div class="text"></div>
    </li>
    <li>
    <div class="title">B</div>
    <div class="text"></div>
    </li>
    <li>
    <div class="title">C</div>
    <div class="text"></div>
    </li>
    <li>
    <div class="title">D</div>
    <div class="text"></div>
    </li>
    <li>
    <div class="title">E</div>
    <div class="text"></div>
    </li>
</ul>
</div>

没有固定的高度。现在我想用类“坏-3”，这个列表在第三个元素之后就会中断/浮动。

它应该是这样的：

A  D
B  E
C

我怎么能这么做？

谢谢

Answer 1

试试这边

​

.break-3 {
    -webkit-columns: 100px 2; /* Chrome, Safari, Opera */
    -moz-columns: 100px 2; /* Firefox */
    columns: 100px 2;
}
li {list-style:none;}

<div class="break-3">
    <ul>
    <li>
    <div class="title">A</div>
    <div class="text"></div>
    </li>
    <li>
    <div class="title">B</div>
    <div class="text"></div>
    </li>
    <li>
    <div class="title">C</div>
    <div class="text"></div>
    </li>
    <li>
    <div class="title">D</div>
    <div class="text"></div>
    </li>
    <li>
    <div class="title">E</div>
    <div class="text"></div>
    </li>
    </ul>
</div>

​

Answer 2

你可以把他们都瞄准

.break-3 > ul > li{
  YOUR CSS
}

然后你就可以瞄准前三个目标，告诉他们不要做其他人正在做的事情。

.break-3 > ul > li:nth-child(1),
.break-3 > ul > li:nth-child(2),
.break-3 > ul > li:nth-child(3) {
  YOUR CSS
}

Answer 3

你不能脱离第三个元素，但你可以这样做。

ul li{
    display:inline-block;
    width:calc(50% - 4px);
}