我正在尝试在容器中设置一个高度为100%的div(高度为50%),然后在其旁边设置两个div,每个高度为50%。
这是我的意思的示例:
我还希望所有div之间都有一个边距,如上图所示。
到目前为止,这是我的代码:
<div style="height: 50%;">
<div style="height: 100%; float: left; margin-right: 15px;">
<p>Content</p>
</div>
<div style="float: right; height: 50%;">
<p>Content</p>
</div>
<div style="float: right; height: 50%;">
<p>Content</p>
</div>
</div>
JsFiddle:https://jsfiddle.net/ne4njtvr/
像这样吗?
请注意,如果你需要支持旧的浏览器,这可以用做display: table
以及
html, body {
margin: 0;
height: 100%;
}
.wrapper {
display: flex;
height: 100%;
}
.wrapper .left,
.wrapper .right {
flex: 1;
display: flex;
flex-direction: column;
}
.wrapper .right div {
flex: 1;
}
.wrapper .right div ~ div {
flex: 2;
}
div {
border: 1px solid;
box-sizing: border-box;
}
<div class="wrapper">
<div class="left">
Left
</div>
<div class="right">
<div>
Right - Top
</div>
<div>
Right - Bottom
</div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句