有一個主 div (#root)，其中我需要 4 個內(nèi)部 div，每個內(nèi)部 div 的一側(cè)都完全拉伸（運(yùn)行代碼片段即可查看）。現(xiàn)在我在這里：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>現(xiàn)在我想left在和right之間充分伸展。topbottom請注意，所有托盤都有固定寬度（左、右）或固定高度（頂部、底部）。我會避免在現(xiàn)有的 div 中嵌套更多的 div。Flexbox 不是必須的，但我發(fā)現(xiàn)與其他可能性相比，它很簡單且面向未來。
2 回答
子衿沉夜
TA貢獻(xiàn)1828條經(jīng)驗 獲得超3個贊
一個簡單的浮動配置可以在沒有彈性盒的情況下做到這一點(diǎn)：
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貢獻(xiàn)1757條經(jīng)驗 獲得超8個贊
CSS-Grid 可以做到這一點(diǎn)：
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 關(guān)注
- 150 瀏覽
添加回答
舉報
0/150
提交
取消