19.多列布局

效果图

DOM

<div class="container">
            <h1>这是第一列的标题,很长</h1>
            <p>这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长</p>
            <h3>这是第一列的标题,很长</h3>
            <p>这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长</p>
            <p>这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长</p>
            <p>这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长</p>
            <p>这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长</p>
            <p>这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长</p>
            <p>这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长</p>
            <p>这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长</p>
            <p>这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长</p>
            <p>这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长</p>
            <p>这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长</p>
            <p>这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长这是第一列的标题,很长</p>
            
        </div>

CSS

*{
    margin: 0;
    padding: 0;
}
.container{
    width: 80%;
    max-width: 800px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #EAE8E8;
    padding: 5px;
    -webkit-columns:9em 3 ;
    -moz-columns: 9em 3;
    columns: 9em 3;
}
h1{
    font-size: 1.5em;
    margin-bottom: 1em;
}
h3{
    margin-bottom: 0.5em;
}
p{
    margin-bottom: 1em;text-indent: 2em;
    line-height: 1.624;
    font-size: .7em;
}