在 HTML 中创建 3 列 – 左右固定宽度和中间弹性 - Create 3 columns in HTML – left and right fixed width and middle elastic 小贝子编程网

我试图在html中创建三列，左列位于屏幕左侧，宽度固定，右侧位于屏幕右侧，宽度固定。中间列弹性并填充剩余宽度。如果可能的话，我尽量不使用flex。

CSS应该是什么样子？

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 {}

我创建了两个简单的例子。第一个不使用flex，只要你不想使用它

使用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>

可以使用float: left;和float: right，但有以下缺点：

middle元素需要在right元素之后使用
如果元素的高度依赖于其内容，那么在指定固定高度之前，所有元素的高度都不会匹配。您可以看到一个灰色区域，它是下面示例中的容器

.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 &amp; 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>

在 HTML 中创建 3 列 – 左右固定宽度和中间弹性

相关内容

最新更新

热门标签：