-1
我想擁有pinterest.com類的css模板。我明白了。我想擁有pinterest.com風格的模板
但是，我的一些小部件被切斷並進入下一行。我的意思是，小部件的一半進入一行，另一半進入下一行。
而且我想水平放置我的小部件。不垂直。
高級感謝您的回覆。
查看我的css和html代碼。
#wrapper-main{
\t column-count: 4;
\t column-gap: 30px;
\t column-fill: auto;
\t overflow: hidden;
\t width: 1200px;
\t margin: 0 auto;
\t padding-bottom: 250px;
}
.widget-main{
\t background-color: #6d6d6d;
\t box-shadow: 1px 1px 8px #cfcfcf;
\t margin-bottom: 20px;
\t display: block;
\t min-height: 250px;
}
.widget-blue{
\t background-color: #3ec6e0;
}
.widget-seagreen{
\t background-color: #56d6be;
}
.widget-red{
\t background-color: #e2546c;
}
.widget-yellow{
\t background-color: #fc8b01;
}
.widget-green{
\t background-color: #81b847;
}
.widget-blue2{
\t background-color: #2f99b3;
}
.widget-mud{
\t background-color: #dbae53;
} \t<body>
<div id="wrapper-main">
\t \t \t
\t <div class="widget-main">Widget 01</div>
\t <div class="widget-main widget-blue">Widget 02</div>
\t <div class="widget-main widget-seagreen">Widget 03</div>
\t <div class="widget-main widget-mud">Widget 04</div>
\t <div class="widget-main widget-red">Widget 05</div>
\t <div class="widget-main widget-yellow">Widget 06</div>
\t <div class="widget-main widget-green">Widget 07</div>
\t <div class="widget-main widget-blue2">Widget 08</div>
\t <div class="widget-main widget-blue">Widget 09</div>
\t <div class="widget-main widget-seagreen">Widget 10</div>
\t <div class="widget-main widget-mud">Widget 11</div>
\t <div class="widget-main widget-red">Widget 12</div>
\t <div class="widget-main widget-yellow">Widget 13</div>
\t <div class="widget-main widget-green">Widget 14</div>
</div>
</body>
Hi Kikonyogo和Serge，它不起作用。謝謝你嘗試。 – Manoj
我發現下面的鏈接來自本網站的其他問題。 https://jsfiddle.net/2otpzbgt/1/ https://jsfiddle.net/costumingdiary/p0czqdz0/ – Manoj