Html 砌石整齐
我正在为一个博客做一个帖子列表,我想用砖石做。我发现的问题是:Html 砌石整齐,html,css,masonry,Html,Css,Masonry,我正在为一个博客做一个帖子列表,我想用砖石做。我发现的问题是: 加载帖子时的顺序为列,因此顺序如下所示: 1 3 5 2 4 6 我想: 1 2 3 4 5 6 如果我解决了第二个问题,行与行之间就会出现空白 接下来,我将展示一幅关于我的问题的图像: 所以我想要一个像后砌石图像这样的解决方案。我已经在这里添加了代码 HTML是: <ul id="posts"> <li class="wow fadeInUp" data-wow-duration="700ms" data-
<ul id="posts">
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title 1</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
<a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title 2</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
<a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title <br> Lorem <br> Ipsum</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
<a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title ramdom <br> lore</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
<a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title for test</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
<a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title <br> test</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
<a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
<a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title <br> a <br> five</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
<a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
<a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
<a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
<a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
<a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
<a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
</div>
</div>
</div>
</li>
</ul>
您可以尝试使用列计数(CSS属性)创建砌体。 下面是一个可以帮助您解决问题的示例 HTML: 这里是它的小提琴:-
您可以尝试使用列计数(CSS属性)创建砌体。 下面是一个可以帮助您解决问题的示例 HTML: 这里是它的小提琴:-
我需要帖子的顺序是行而不是列,就像我在问题中输入的数字一样。我需要帖子的顺序是行而不是列,就像我在问题中输入的数字一样
#posts li {
display: inline-block;
margin: 0;
padding: 0;
width: 33%;
background: #efefef;
}
#posts li .bloglist {
width: 100%;
position: relative;
border: 1px solid #f1f1f1;
padding-bottom: 22px;
overflow: hidden;
}
.text-center {
text-align: center;
}
#posts li .bloglist .overflow {
z-index: 2;
}
.overflow {
background-color: #3994ce;
mix-blend-mode: multiply;
opacity: .8;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
}
#posts li .bloglist .post-content {
position: relative;
z-index: 3;
}
#posts li .bloglist .post-content .listHeader {
position: relative;
margin-bottom: 20px;
}
#posts li .bloglist .post-content .sbMeta {
position: relative;
width: 100%;
}
#posts li .bloglist .post-content .sbMeta .loader {
height: 1px;
width: 100px;
margin: 0 auto;
margin-bottom: 20px;
position: relative;
background: #fff;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
#posts li .bloglist .post-content .sbAuth {
width: 100%;
text-align: center;
margin-bottom: 40px;
}
#posts li .bloglist .post-content .sbAuth a {
color: #fff;
}
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#posts li .bloglist .post-content .sbFooter {
width: 90%;
position: absolute;
left: 50%;
transform: translate(-50%,0);
}
<ul id="posts">
<li>col 1</li>
<li>col 2</li>
<li>col 3</li>
<li>col 4</li>
<li>col 5</li>
<li>col 6</li>
</ul>
#posts { /* Masonry container */
column-count: 3;
column-gap: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-ms-column-gap: 1em;
}
#posts li { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}