在较小的视口宽度时,可以使用CSS的媒体查询和Flexbox布局来将4个div对齐为每行2个。
<div class="container">
<div class="box">Div 1</div>
<div class="box">Div 2</div>
<div class="box">Div 3</div>
<div class="box">Div 4</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
}
.box {
flex: 1 0 50%;
}
@media (max-width: 768px) {
.box {
flex-basis: 100%;
}
}
在上面的代码中,.container
使用display: flex
和flex-wrap: wrap
来创建一个Flexbox容器,并使其子元素可以换行。.box
使用flex: 1 0 50%
将每个div平均占据父容器的一半宽度。
@media
)来设置较小视口宽度时的样式。在上面的代码中,.box
在视口宽度小于或等于768px时,使用flex-basis: 100%
将每个div的宽度设置为100%,从而实现每行2个div的对齐。这样,无论在何种设备上访问页面,当视口宽度较小时,4个div都会自动对齐为每行2个。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云