我正在网站上工作并且我已经使用了这段代码:
.container {
-webkit-column-count: 4;
-webkit-column-gap: 1em;
}
.container div {
background-color: lightblue;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}

<div class="container">
<div>1 .Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere natus amet, architecto maxime cum adipisci, deleniti quasi non sed, totam accusamus placeat quibusdam ipsam?.</div>
<div>2. Sit ducimus delectus labore veritatis dicta earum fugit cum repellat est perspiciatis impedit, architecto ut officiis placeat quidem aspernatur dolores assumenda nostrum dolorem quo rerum hic? Repudiandae facilis, cum dignissimos.</div>
<div>3. Libero enim saepe magnam eaque ratione odio deleniti, nostrum ullam eum ea eveniet hic voluptatum tempora voluptatibus voluptates asperiores, aut laudantium rem quod minus cum accusantium placeat blanditiis esse. Praesentium.</div>
<div>4. Id ipsum ullam placeat laboriosam nam repellat obcaecati, adipisci necessitatibus illo accusamus error voluptatibus sit, animi fugiat sequi magni? Eum sint porro, cum, ratione quo maxime harum quibusdam totam itaque?</div>
<div>5. Eveniet illum alias totam, quisquam magnam inventore ad quidem nemo sunt pariatur saepe, minima qui nam sapiente in blanditiis reiciendis? Omnis reiciendis corporis asperiores minima assumenda, quae accusamus culpa numquam!</div>
<div>6. ipsum quaerat aliquam dolor fuga, rem. Quis culpa, excepturi magni ducimus voluptatem dolores quod placeat ut eum odio sit fugit vitae, cum voluptatum vel ipsum mollitia sed, laborum praesentium!</div>
</div>
&#13;
我想显示像:
这样的div1 / 2 / 3 / 4
5 / 6
感谢您的帮助!
答案 0 :(得分:1)
不要使用CSS列 - 他们对浏览器的支持很差。
用浮点数做:
.container div {
width: 25%;
float:left;
}