订单列CSS

时间:2016-02-29 16:19:07

标签: html css

我正在网站上工作并且我已经使用了这段代码:



.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;
&#13;
&#13;

我想显示像:

这样的div
1 / 2 / 3 / 4 

5 / 6

感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

不要使用CSS列 - 他们对浏览器的支持很差。

用浮点数做:

.container div {
    width: 25%;
    float:left;
}