这将是WordPress的index.php页面,因此它将使用WordPress循环将博客文章输出为单独的“资源”。
通常,我会将其实现为flexbox,因为项目的数量是可变的,并且我需要它具有响应性,但是这一次我们的设计师在项目之间添加了边框。
可以,但是在行尾之前或之后不包括边框。我无法解决我所知道的任何伪选择器。
目前,我的HTML和CSS如下所示:
section {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
section div {
display: flex;
flex-direction: column;
border-right: 1px solid red;
padding-right: 20px;
margin-right: 20px;
margin-bottom: 10px;
}
<section>
<div>
<img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
<p>
This is some text
</p>
</div>
<div>
<img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
<p>
This is some text
</p>
</div>
<div>
<img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
<p>
This is some text
</p>
</div>
<div>
<img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
<p>
This is some text
</p>
</div>
<div>
<img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
<p>
This is some text
</p>
</div>
<div>
<img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
<p>
This is some text
</p>
</div>
<div>
<img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
<p>
This is some text
</p>
</div>
<div>
<img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
<p>
This is some text
</p>
</div>
<div>
<img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
<p>
This is some text
</p>
</div>
<div>
<img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
<p>
This is some text
</p>
</div>
</section>
我可以使用CSS网格解决此问题吗?有没有办法使用flexbox或其他非网格布局来实现这一点?
这实际上取决于项目下的背景,但是如果它是由一种颜色组成的,则可以使用将左侧边框与伪元素简单重叠的解决方案,如下所示:
section {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
position: relative;
margin-left: -20px;
}
section::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 20px;
width: 1px;
background: #fff;
}
section div {
display: flex;
flex-grow: 1;
flex-direction: column;
border-left: 1px solid red;
padding-left: 20px;
margin-left: 20px;
text-align: center;
}
<section>
<div>
<img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
<p>
This is some text
</p>
</div>
<div>
<img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
<p>
This is some text
</p>
</div>
<div>
<img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
<p>
This is some text
</p>
</div>
<div>
<img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
<p>
This is some text
</p>
</div>
<div>
<img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
<p>
This is some text
</p>
</div>
</section>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句