我正在尝试使用 Flexbox 实现以下布局。
┌─┬─────┐
│A│ │
├─┤ C │
│B│ │
└─┴─────┘
是否可以在不将 A 和 B 包装到包装器中的情况下这样做?
是的,这是可能的。请考虑到在此示例中主容器具有固定的宽度和高度。
#container{
height: 200px;
width: 300px;
display: flex;
flex-flow: column wrap;
}
#container, #A, #B, #C{
box-sizing: border-box;
border: 1px solid black;
}
#A{
height: 50%;
width: 100px;
}
#B{
height: 50%;
width: 100px;
}
#C{
height: 100%;
width: 200px;
}
<div id="container">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)