并排对齐水平 Div 并堆叠 [英] Aligning Horizontal Div's Side By Side and Stacked
问题描述
我想有 4 个 div:前两个是 25% 的宽度和 50% 的高度，一个在上面.其他 div 分别为 25% 宽度和 100% 高度，然后分别为 50% 宽度和 100% 高度.我不知道如何将它们并排排列，因为它们相互碰撞.
div {背景:绿色；边框:1px纯白色；}.box3{显示:内联块；宽度:50%；高度:360px；边框:1px 实心 rgba(255,255,255,0.3)；box-sizing: 边框框；}.box2{显示:内联块；宽度:25%；高度:360px；边框:1px 实心 rgba(255,255,255,0.3)；box-sizing: 边框框；}.盒子{宽度:25%；高度:180px；边框:1px 实心 rgba(255,255,255,0.3)；box-sizing: 边框框；}<div class="box"></div><div class="box"></div><div class="box2"></div><div class="box3"></div>这是一张显示我想要的图片.
这太难用了，当我将元素放在 div 中时，它们也会漂浮在页面上，不会粘在实际的 div 中，所以我愿意使用完全替代的解决方案或框架，可以使这更容易
Flexbox 让这样的事情变得非常简单:代码笔:http://codepen.io/SergiOca/pen/zNWrKP
HTML
<div class="full-wrap"><div class="first-wrap"><div class="box"></div><div class="box"></div><div class="box2"></div><div class="box3"></div>
CSS
.full-wrap{显示:弹性；}.first-wrap{显示:弹性；弹性方向:列；弹性:1；}.box3{弹性:2；高度:360px；边框:1px纯黑色；}.box2{弹性:1；高度:360px；边框:1px纯黑色；}.盒子{高度:180px；边框:1px纯黑色；}I'm trying to have 4 divs: the first two are 25% width and 50% height, one with the other above it. The other div's are 25% width and 100% height, and then 50% width and 100% height respectively. I can't figure out how to line them all up side by side, because they bump each other down.
div {
background: green;
border: 1px solid white;
}
.box3{
display: inline-block;
width: 50%;
height:360px;
border: 1px solid rgba(255,255,255,0.3);
box-sizing: border-box;
}
.box2{
display: inline-block;
width: 25%;
height:360px;
border: 1px solid rgba(255,255,255,0.3);
box-sizing: border-box;
}
.box{
width: 25%;
height:180px;
border: 1px solid rgba(255,255,255,0.3);
box-sizing: border-box;
}
<div class="box"></div>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
Here's an image showing what I want.
This is so finnicky to work with, and when I put elements within the div's they also float around the page and do not stick in the actual div's, so I'm willing for entirely alternate solutions or frameworks that could make this easier as well.
Flexbox makes things like that very easy: Codepen: http://codepen.io/SergiOca/pen/zNWrKP
HTML
<body>
<div class="full-wrap">
<div class="first-wrap">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
CSS
.full-wrap{
display: flex;
}
.first-wrap{
display: flex;
flex-direction: column;
flex: 1;
}
.box3{
flex: 2;
height:360px;
border: 1px solid black;
}
.box2{
flex: 1;
height:360px;
border: 1px solid black;
}
.box{
height:180px;
border: 1px solid black;
}
这篇关于并排对齐水平 Div 并堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
