0

我正在为即将到来的项目进行砌体布局，并想知道它们是否是一种仅使用 CSS 从左到右而不是从上到下排列砌体瓷砖的方法。

我尝试在 jsfiddle 上重新创建布局，但输出看起来不同，所以我决定截屏

http://i255.photobucket.com/albums/hh140/testament1234/Masonry_zps8b8519b6.jpg

HTML

<div class="masonry">

    <div class="masonry-columns">
    <h2>1st Masonry</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget fringilla ante. Phasellus tincidunt erat eu sodales semper. Donec sed lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut massa fringilla porttitor. Aenean vitae sapien rutrum, rutrum enim varius, elementum magna. Aliquam sollicitudin accumsan dui, ut faucibus tellus pretium fermentum. In fringilla quam lorem, eget congue dolor euismod at. Proin nunc lorem, rutrum eu rutrum ac, tristique convallis turpis. Fusce faucibus erat a mauris consequat, sed cursus velit aliquet. 
    </div>

    <div class="masonry-columns">
    <h2>2nd Masonry</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget fringilla ante. Phasellus tincidunt erat eu sodales semper. Donec sed lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut massa fringilla 
    </div>

    <div class="masonry-columns">
    <h2>3rd Masonry</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget fringilla ante. Phasellus tincidunt erat eu sodales semper. Donec sed lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut massa fringilla. lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut
    </div>

    <div class="masonry-columns">
    <h2>4th Masonry</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget fringilla ante. Phasellus tincidunt erat eu sodales semper. Donec sed lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut massa fringilla. lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut massa fringilla porttitor. Aenean vitae sapien rutrum, rutrum enim varius, elementum magna.
    </div>

</div>

CSS

html, body{height:100%}


.masonry{
    clear: both;
    margin: 0px auto;
    padding: 20px 20px 0px;
    position: relative;
    width: 900px;
    z-index: 9;
    background-color:salmon;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-box-sizing:border-box;
    height:100%;
}

.masonry-columns{
    display: inline-block;
    list-style: none outside none;
    margin-bottom: 20px;
    padding: 20px;
    width: 100%;
    -moz-box-sizing:border-box;
    background-color:teal;
    float:left;
    direction:ltr
}
4

0 回答 0