具有多个元素的CSS浮动2列布局
具有多个元素的CSS浮动2列布局
提问于 2018-10-18 20:31:52
我想使用四个div创建一个简单的两列布局。我受到限制，无法修改HTML结构。我只能修改CSS。
我希望右列中的第二个div位于前一个右列div的正下方。现在，它被推到第二个左div的顶部。
现在，这是我在HTML中的代码：
<div id="parent">
<div class="left">
Left 1
</div>
<div class="right">
Right 1
</div>
<div class="left">
Left 2
</div>
<div class="right">
Right 2
</div>
</div>CSS：
.left {
height: 400px;
width: 60%;
float: left;
background-color: red;
display: block;
}
.right {
width: 30%;
float: right;
background-color: green;
display: block;
}看我的小提琴：http://jsfiddle.net/Lun61g7a/2/
回答 1
Stack Overflow用户
发布于 2018-10-18 21:06:21
使用flexbox并允许元素在需要时移动到下一个“行”
#parent {
display: flex;
flex-wrap: wrap;
}
.left {
height: 400px;
width: 60%;
background-color: red;
display: block;
}
.right {
width: 30%;
background-color: green;
display: block;
}<div id="parent">
<div class="left">
Left 1
</div>
<div class="right">
Right 1
</div>
<div class="left">
Left 2
</div>
<div class="right">
Right 2
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52874107
复制相关文章
相似问题
腾讯云开发者
