有一个主 div (#root)，其中我需要 4 个内部 div，每个内部 div 的一侧都完全拉伸（运行代码片段即可查看）。现在我在这里：html { height: 100%;}body { height: 100%; margin: 0; text-align: center;}#root { background-color: blue; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; height: 100%;}.tray { box-sizing: border-box; background-color: red; border: thin solid black;}.tray-top { height: 48px; width: 100%;}.tray-bottom { height: 48px; width: 100%; align-self: flex-end;}.tray-left { width: 48px;}.tray-right { width: 48px;}<div id="root"> <div class="tray tray-top">top</div> <div class="tray tray-left">left</div> <div class="tray tray-right">right</div> <div class="tray tray-bottom">bottom</div></div>现在我想left在和right之间充分伸展。topbottom请注意，所有托盘都有固定宽度（左、右）或固定高度（顶部、底部）。我会避免在现有的 div 中嵌套更多的 div。Flexbox 不是必须的，但我发现与其他可能性相比，它很简单且面向未来。
2 回答
子衿沉夜
TA贡献1828条经验 获得超3个赞
一个简单的浮动配置可以在没有弹性盒的情况下做到这一点：
html,
body {
height: 100%;
margin: 0;
text-align: center;
}
#root {
background-color: blue;
height: 100%;
}
.tray {
box-sizing: border-box;
background-color: red;
border: thin solid black;
}
.tray-top,
.tray-bottom {
height: 48px;
line-height:48px;
clear: both;
}
.tray-left,
.tray-right {
width: 48px;
height: calc(100% - 96px);
float: left;
}
.tray-right {
float: right;
}
/* to align vertically the content */
.tray-left::before,
.tray-right::before {
content:"";
display:inline-block;
height:50%;
}
<div id="root">
<div class="tray tray-top">top</div>
<div class="tray tray-left">left</div>
<div class="tray tray-right">right</div>
<div class="tray tray-bottom">bottom</div>
</div>
陪伴而非守候
TA贡献1757条经验 获得超8个赞
CSS-Grid 可以做到这一点：
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
text-align: center;
}
#root {
background-color: blue;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto 1fr auto;
height: 100%;
}
.tray {
box-sizing: border-box;
background-color: red;
border: thin solid black;
}
.tray-top {
height: 48px;
grid-column: 1 / -1;
}
.tray-bottom {
height: 48px;
grid-column: 1 / -1;
}
.tray-left {
width: 48px;
}
.tray-right {
width: 48px;
grid-column:3;
}
<div id="root">
<div class="tray tray-top">top</div>
<div class="tray tray-left">left</div>
<div class="tray tray-right">right</div>
<div class="tray tray-bottom">bottom</div>
</div>
- 2 回答
- 0 关注
- 85 浏览
添加回答
举报
0/150
提交
取消