CSS多列布局实战-优快云博客

多列布局比较简单，就像报纸排版的内容一样，下面直接上例子：

css代码：

<style>
     column-count: 3;
     column-fill: balance;
     column-gap: 1.5em;
     column-rule:1px solid black;
     height: 300px;
     border:1px solid red;            
</style>

html代码：

<p>
        <img src="img/2015071111482431_easyicon_net_128.png" alt="">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad adipisci, aspernatur delectus ducimus eum, eveniet hic ipsam iste iure nihil nisi nostrum officiis qui reprehenderit, similique soluta tempora unde.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci asperiores blanditiis, dolore dolores eaque eos eum fugit harum ipsa iste modi mollitia nobis pariatur saepe tenetur voluptatem. Accusantium, totam!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A cumque dolorum, ducimus illo impedit in ipsum magni maiores necessitatibus nisi odio, quaerat rem sapiente sint soluta sunt velit! A, illum!
        <img src="img/2015071111482431_easyicon_net_128.png" alt="">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque minus reprehenderit repudiandae, sed similique voluptates. Alias, deserunt explicabo illo nesciunt quibusdam, quidem quos repellat tempora tempore ullam vel voluptates voluptatibus!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam ducimus placeat quia vel vero. Ab adipisci amet aperiam dicta dolorum eius est et officiis provident qui, quod, tempora tenetur veritatis.
    </p>
复制代码

浏览器自适应宽度，如果设置了宽度和高度浏览器会根据内容调整列数。