以下是一个按行排列的两栏布局的示例代码:
HTML代码:
左侧栏
左侧栏内容...
右侧栏
右侧栏内容...
CSS代码:
.container {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 1;
padding: 10px;
box-sizing: border-box;
}
@media (min-width: 768px) {
.column {
flex: 0 0 50%;
max-width: 50%;
}
}
以上代码使用了Flex布局来实现两栏布局。在.container
容器中,设置display: flex
来启用Flex布局,flex-wrap: wrap
用于在容器宽度不足时折行显示。每个.column
子元素设置了flex: 1
来占据平均宽度,并设置了一些内边距。
在媒体查询中,使用@media
来设置屏幕宽度大于等于768px时的样式。在此时,.column
元素的flex
属性被设置为0 0 50%
,即不可伸缩,不可收缩,并且最大宽度为50%,从而实现了两栏布局。
你可以根据实际需要调整容器和列的样式,以适应你的布局要求。