在HTML–中创建3列 ；左右固定宽度和中间松紧带

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

CSS应该是什么样子

html

---

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

使用

calc（）的示例
.container>div{
浮动：左；
}
.左{
宽度：100px；
背景颜色：粉红色；
}
.中{
宽度：计算（100%-200px）；
背景颜色：蓝色；
}
.对{
宽度：100px；
背景颜色：黄色；
}
无弹性
左边
中间的
赖特
浮动：左
和
float:right
可以使用，但它有以下缺点：

中间的
元素需要在右侧的
元素之后使用

如果元素高度取决于其内容，则在指定固定高度之前，所有元素的高度都不会匹配。您可以在下面的示例中看到一个灰色区域，即容器

.container{
文本对齐：居中；
背景：浅灰色；
}
.容器：：之后{
内容：''；
显示：块；
宽度：0；
明确：两者皆有；
}
.左{
浮动：左；
宽度：150px；
背景:#33AFFF；
}
.对{
浮动：对；
宽度：150px；
背景：#FFC300；
}
.中{
左边距：150像素；
右边距：150px；
背景:#FF5733；
}
float
左左
对对对
中-中-中-中-中-中-中-中-中-中-中-中-中-中-中-中
下一个元素
为什么不
flex
？旧方法是浮动。首先是左右浮动，然后是中间浮动<代码>溢出：隐藏
将对中间部分起到神奇的作用。谢谢。在no-flex示例中，使用
width:calc（100%-200px）
为什么这样做？既然你只负责左边的柱子，为什么中间的柱子没有伸到尽头？@n_1我不知道你是什么意思。左边是
100px
，右边是
100px
，中间是
100%
没有左边也没有右边-so
calc（100%-leftWidth-righwidth）
，这使得
100%-200px
。
<div class="container">
    <div class="left">Left</div>
    <div class="middle">Middle</div>
    <div class="right">Right</div>

</div>

.container {}
.left {}
.middle {}
.right {}