2016-02-29 63 views
0

我正在一个网站上,我有这样的代码:顺序列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>

我想显示div的一样:

1/2/3/4 

5/6 

谢谢您帮帮我 !

+0

几乎可以肯定 - http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css –

回答

1

不要使用CSS列 - 它们在浏览器中的支持很差。

花车开始:

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