我正在嘗試在 html 中創(chuàng)建三列，左列位于屏幕左側(cè)且寬度固定，右側(cè)列位于屏幕右側(cè)且寬度固定，中間列具有彈性并填充剩余寬度。如果可能的話，我試圖不使用 flex 。CSS 應(yīng)該是什么樣子？html<div class="container"> <div class="left">Left</div> <div class="middle">Middle</div> <div class="right">Right</div></div>CSS.container {}.left {}.middle {}.right {}
2 回答
MMTTMM
TA貢獻(xiàn)1869條經(jīng)驗(yàn) 獲得超4個(gè)贊
我創(chuàng)建了兩個(gè)簡(jiǎn)單的例子。第一個(gè)flex只要你不想用就不會(huì)用。
使用示例calc()
.container > div {
float: left;
}
.left {
width: 100px;
background-color: pink;
}
.middle {
width: calc(100% - 200px);
background-color: blue;
}
.right {
width: 100px;
background-color: yellow;
}
<h1>No flex</h1>
<div class="container">
<div class="left">Left</div>
<div class="middle">Middle</div>
<div class="right">Right</div>
</div>
使用示例flex
.container {
display: flex;
}
.left {
width: 100px;
background-color: pink;
}
.middle {
flex-grow: 1;
background-color: blue;
}
.right {
width: 100px;
background-color: yellow;
}
<h1>Flex</h1>
<div class="container">
<div class="left">Left</div>
<div class="middle">Middle</div>
<div class="right">Right</div>
</div>
HUH函數(shù)
TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超4個(gè)贊
float: left;可以float: right使用，但它有以下缺點(diǎn)：
該
middle元素需要在該元素之后使用right。如果元素高度依賴于其內(nèi)容，那么在您指定固定高度之前，所有元素的高度都不會(huì)匹配。您可以看到一個(gè)灰色區(qū)域，它是下面示例中的容器。
.container {
text-align: center;
background: lightgray;
}
.container::after {
content: '';
display: block;
width: 0;
clear: both;
}
.left {
float: left;
width: 150px;
background: #33AFFF;
}
.right {
float: right;
width: 150px;
background: #FFC300;
}
.middle {
margin-left: 150px;
margin-right: 150px;
background: #FF5733;
}
<h2>float</h2>
<div class="container">
<div class="left">left left left left left left left left left left </div>
<div class="right">right right right right right </div>
<div class="middle">middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle </div>
</div>
<div>Next element</div>
或者你可以使用display: table它的孩子與display: table-cell.
.container {
display: table;
width: 100%;
}
.left {
display: table-cell;
width: 150px;
background: #33AFFF;
}
.middle {
display: table-cell;
background: #FFC300;
}
.right {
display: table-cell;
width: 150px;
background: #FF5733;
}
<h2>display: table & display: table-cell</h2>
<div class="container">
<div class="left">left left left left left left left left left left</div>
<div class="middle">middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle </div>
<div class="right">right right right right right </div>
</div>
<div>Next element</div>
- 2 回答
- 0 關(guān)注
- 158 瀏覽
添加回答
舉報(bào)
0/150
提交
取消