本文介绍了如何利用CSS的Flexbox特性创建响应式的列布局。通过设置固定高度和调整列方向，可以实现不同设备上的两列布局。同时，提供了使用float和inline-block作为备选方案，并针对不支持Flexbox的浏览器进行了适配。示例代码详细展示了如何通过CSS调整元素的显示方式，确保在各种场景下都能保持良好的布局效果。
假设这将是您页面的主要布局,您可以尝试设置固定高度并使用flexbox的列方向：
.flex_container {
height: 100vh; /*adjust this value like you want*/
display: flex;
flex-direction: column;
flex-wrap:wrap;
}
.flex_child {
background:purple;
border:2px solid #fff;
box-sizing:border-box;
width:calc(100% / 3);
}
.square {
flex:1 1 100%;
}
.rect {
flex:1 1 47%;
}
body {
margin: 0;
}
如果你想要一个更好的浏览器支持,你可以使用float / inline-block,稍微调整一下在开始时使用2个方块的类：
.flex_container {
height: 100vh; /*adjust this value like you want*/
}
.flex_child {
background:purple;
border:2px solid #fff;
box-sizing:border-box;
width:calc(100% / 3);
height:100%;
}
.square:nth-child(1) {
float:left;
}
.square:nth-child(2) {
float:right;
}
.rect {
display:inline-block;
height:50%;
vertical-align:top;
}
body {
margin: 0;
}
如果您还无法更改类,请使用一些负边距来纠正最后一个元素的位置：
.flex_container {
height: 100vh; /*adjust this value like you want*/
}
.flex_child {
background:purple;
border:2px solid #fff;
box-sizing:border-box;
width:calc(100% / 3);
height:100%;
}
.square:first-child {
float:left;
}
.square:last-child {
float:right;
margin-top:-50vh;
}
.rect {
display:inline-block;
height:50%;
vertical-align:top;
}
body {
margin: 0;
}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
