Html 带有3个流体柱的CSS流体盒

我有一个

div

容器，它是流体：

width: 97%;
min-height: 80px;
-webkit-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45);
-moz-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45);
box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45);
background: white;
margin-bottom: 20px;
margin: auto auto;
max-width: 880px;

在这个

div的内部

我想要一个3列布局：

列的宽度是固定的

列是流体宽度

列的宽度也是固定的

为了更好地理解我想要得到什么

代码（）

.post\u包装器{
宽度：97%；
最小高度：80px；
-webkit盒阴影：1px 1px 5px 1px rgba（0,0,0.45）；
-莫兹盒阴影：1px1p5px1pRGBA（0,0,0,0.45）；
盒影：1px 1px 5px 1px rgba（0,0,0,0.45）；
背景：白色；
边缘底部：20px；
保证金：自动；
最大宽度：880px；
}
.post_图像{
背景位置：中心；
最小高度：60px；
宽度：60px；
边框样式：实心；
边框颜色：#91A9A7；
边界半径：3px；
边框宽度：4px；
边缘顶部：5px；
左边距：5px；
浮动：左；
}
.post_1{
浮动：左；
最小高度：10px；
背景：红色；
边缘顶部：5px；
最小宽度：10%；
最大宽度：70%；
左边距：5px；
}
.post_2{
浮动：对；
最小高度：10px；
宽度：110px；
边缘顶部：5px；
左边框：1px纯黑；
左侧填充：5px；
}
.post_数据{
边缘顶部：5px；
左边距：5px；
字体大小：12px；
}
.post_文本{
填充物：5px；
最小高度：40px；
字体大小：14px；
利润底部：3倍；
线高：18px；
字体大小：14px；
宽度：70%；
}

-2016年2月1日-21:06 Uhr
我们的知识来自于我们的知识，来自于我们的精英，我们的知识来自于我们的劳动和生活
vxcvc

您可以这样尝试：

<div class="LeftFixedWidth">
</div>
<div class="MiddleFluidWidth">
    <div class="MiddleContentWrapper">
        <!-- Put your content here -->
    </div>
</div>
<div class="RightFixedWidth">
</div>

.LeftFixedWidth {
    position: fixed;
    left: 0;
    top: 0;
    width: 200px;
}
.RightFixedWidth {
    position: fixed;
    right: 0;
    top: 0;
    width: 200px;
}
.MiddleFluidWidth {
    padding-left: 200px;
    padding-right: 200px;
}

根据固定列的宽度，填充值应相同：

对于这种布局，必须使用

calc（）

函数

请注意浏览器支持：

您所需要的只是侧元素的固定宽度，然后使用calc（）计算中间div的宽度

例如：

#middle-div-fluid{
  float: left;
  width: calc(100% - 100px - 30px); /*first and second width are examples*/
}

---

我认为您可以使用

calc

css3函数来实现这一点

这是你的电话号码

div{
显示：块；
宽度：100%；
浮动：左；
背景色：#607D8B；
填充：10px；
框大小：边框框；
}
跨度{
显示：块；
浮动：左；
边框：1px纯白；
背景色：#3F51B5；
高度：100px；
框大小：边框框；
}
跨度固定宽度{
宽度：30px；
}
跨距{
宽度：计算（100%-（30px*2））；
背景色：#2196F3；
}

请尝试以下操作：

.post\u包装器{
宽度：97%；
最小高度：80px；
-webkit盒阴影：1px 1px 5px 1px rgba（0,0,0.45）；
-莫兹盒阴影：1px1p5px1pRGBA（0,0,0,0.45）；
盒影：1px 1px 5px 1px rgba（0,0,0,0.45）；
背景：白色；
边缘底部：20px；
保证金：自动；
最大宽度：880px；
显示：表格；
}
.post_图像{
背景位置：中心；
最小高度：60px；
宽度：60px；
边框样式：实心；
边框颜色：#91A9A7；
边界半径：3px；
边框宽度：4px；
边缘顶部：5px；
左边距：5px；
浮动：左；
}
.post_1{
浮动：左；
最小高度：10px；
背景：红色；
边缘顶部：5px；
最小宽度：10%；
最大宽度：87%；
左边距：5px；
显示：表格单元格；
}
.post_2{
浮动：无；
最小高度：10px；
宽度：110px；
边缘顶部：5px；
左边框：1px纯黑；
左侧填充：5px；
显示：表格单元格；
垂直对齐：顶部；
}
.post_数据{
边缘顶部：5px；
左边距：5px；
字体大小：12px；
}
.post_文本{
填充物：5px；
最小高度：40px；
字体大小：14px；
利润底部：3倍；
线高：18px；
字体大小：14px；
}

-2016年2月1日-21:06 Uhr
我们的知识来自于我们的知识，来自于我们的精英，我们的知识来自于我们的劳动和生活
vxcvc

使用

flex

。请查看以找到解决方案。JSFIDLE正在工作