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

Question

我正在尝试在 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 {}

Answer 1

我创建了两个简单的例子。第一个flex只要你不想用就不会用。使用示例calc().container > div {&nbsp; &nbsp;float: left;}.left {&nbsp; &nbsp;width: 100px;&nbsp; &nbsp;background-color: pink;}.middle {&nbsp; &nbsp;width: calc(100% - 200px);&nbsp; &nbsp;background-color: blue;}.right {&nbsp; &nbsp;width: 100px;&nbsp; &nbsp;background-color: yellow;}<h1>No flex</h1><div class="container">&nbsp; &nbsp; <div class="left">Left</div>&nbsp; &nbsp; <div class="middle">Middle</div>&nbsp; &nbsp; <div class="right">Right</div></div>使用示例flex.container {&nbsp; &nbsp;display: flex;}.left {&nbsp; &nbsp;width: 100px;&nbsp; &nbsp;background-color: pink;}.middle {&nbsp; &nbsp;flex-grow: 1;&nbsp; &nbsp;background-color: blue;}.right {&nbsp; &nbsp;width: 100px;&nbsp; &nbsp;background-color: yellow;}<h1>Flex</h1><div class="container">&nbsp; &nbsp; <div class="left">Left</div>&nbsp; &nbsp; <div class="middle">Middle</div>&nbsp; &nbsp; <div class="right">Right</div></div>

Answer 2

float: left;可以float: right使用，但它有以下缺点：该middle元素需要在该元素之后使用right。如果元素高度依赖于其内容，那么在您指定固定高度之前，所有元素的高度都不会匹配。您可以看到一个灰色区域，它是下面示例中的容器。.container {&nbsp; text-align: center;&nbsp; background: lightgray;}.container::after {&nbsp; content: '';&nbsp; display: block;&nbsp; width: 0;&nbsp; clear: both;}.left {&nbsp; float: left;&nbsp; width: 150px;&nbsp; background: #33AFFF;}.right {&nbsp; float: right;&nbsp; width: 150px;&nbsp; background: #FFC300;}.middle {&nbsp; margin-left: 150px;&nbsp; margin-right: 150px;&nbsp; background: #FF5733;}<h2>float</h2><div class="container">&nbsp; <div class="left">left left left left left left left left left left </div>&nbsp; <div class="right">right right right right right </div>&nbsp; <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 {&nbsp; display: table;&nbsp; width: 100%;&nbsp;}.left {&nbsp; display: table-cell;&nbsp; width: 150px;&nbsp; background: #33AFFF;}.middle {&nbsp; display: table-cell;&nbsp; background: #FFC300;}.right {&nbsp; display: table-cell;&nbsp; width: 150px;&nbsp; background: #FF5733;}<h2>display: table &amp; display: table-cell</h2><div class="container">&nbsp; <div class="left">left left left left left left left left left left</div>&nbsp; <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>&nbsp; <div class="right">right right right right right </div></div><div>Next element</div>