Question

我想拥有pinterest.com类型的css模板。我明白了。

但是，我的一些小部件被削减并进入下一行。我的意思是，一半的小部件在一行中，另一半在下一行。

我想把我的小部件水平放置。不是垂直的。

高级感谢您的回复。

查看我的css和html代码。

＆＃13;

#wrapper-main{
	    column-count: 4;
	    column-gap: 30px;
	    column-fill: auto;
	    overflow: hidden;
	    width: 1200px;
	    margin: 0 auto;
	    padding-bottom: 250px;
    }

    .widget-main{
	    background-color: #6d6d6d;
	    box-shadow: 1px 1px 8px #cfcfcf;
	    margin-bottom: 20px;
	    display: block;
	    min-height: 250px;
    }

    .widget-blue{
	    background-color: #3ec6e0;
    }

    .widget-seagreen{
	    background-color: #56d6be;
    }

    .widget-red{
	    background-color: #e2546c;
    }

    .widget-yellow{
	    background-color: #fc8b01;
    }

    .widget-green{
	    background-color: #81b847;
    }

    .widget-blue2{
	    background-color: #2f99b3;
    }

    .widget-mud{
	    background-color: #dbae53;
    }

＆＃13;

    <body>
    <div id="wrapper-main">
			
	    <div class="widget-main">Widget 01</div>
	    <div class="widget-main widget-blue">Widget 02</div>
	    <div class="widget-main  widget-seagreen">Widget 03</div>
	    <div class="widget-main  widget-mud">Widget 04</div>
	    <div class="widget-main  widget-red">Widget 05</div>
	    <div class="widget-main  widget-yellow">Widget 06</div>
	    <div class="widget-main  widget-green">Widget 07</div>
	    <div class="widget-main  widget-blue2">Widget 08</div>
	    <div class="widget-main widget-blue">Widget 09</div>
	    <div class="widget-main  widget-seagreen">Widget 10</div>
	    <div class="widget-main  widget-mud">Widget 11</div>
	    <div class="widget-main  widget-red">Widget 12</div>
	    <div class="widget-main  widget-yellow">Widget 13</div>
	    <div class="widget-main  widget-green">Widget 14</div>

    </div>
</body>

＆＃13;

Answer 1

我认为最简单的方法就是使用Masonry ..我试着做你做过的一次，而且不能横向做。

来源：http://masonry.desandro.com/

Answer 2

检查是否有链接的javascript文件。有时javascript用于根据给定条件动态编辑css属性，例如根据屏幕大小调整颜色大小

我想要pinterest.com样式模板

2 个答案: