在CSS中,可以使用flexbox来将一行划分为两列,并在786px屏幕宽度上显示全宽。下面是实现的步骤:
<div>
标签或其他适当的标签。display: flex
来实现。flex-wrap
属性为wrap
,以便在屏幕宽度不足时换行显示。flex-basis
属性来指定每个子元素的初始宽度。flex-direction
属性为column
,以使子元素垂直排列,并设置子元素的宽度为100%。下面是一个示例代码:
<div class="container">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
}
.column {
flex-basis: 50%;
}
@media screen and (max-width: 786px) {
.container {
flex-direction: column;
}
.column {
width: 100%;
}
}
在这个示例中,父容器使用flexbox布局,并设置了flex-wrap: wrap
以实现换行。子元素的宽度通过flex-basis: 50%
设置为50%。在786px屏幕宽度以下,媒体查询生效,父容器的flex-direction
属性变为column
,子元素的宽度设置为100%。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云函数(SCF)。
领取专属 10元无门槛券
手把手带您无忧上云