容器固定宽度。中心 div 动态宽度。希望左右 div 平均填充剩余宽度

【问题标题】：Container fix width. Center div dynamic width. want left right divs to fill out remaining width equally容器固定宽度。中心 div 动态宽度。希望左右 div 平均填充剩余宽度
【发布时间】：2012-09-10 13:14:49
【问题描述】：

有三列..所有三列的组合宽度是固定的..第二（中心）列将具有动态内容..我需要左右列来填充剩余空间（容器宽度 - 中心列动态宽度）相等。

示例： http://jsfiddle.net/htKje/

<div class="container">
   <div class="bg"></div>
   <div>Lorem Ipsum</div>
   <div class="bg"></div>
</div>

CSS :
.container { width:500px; }
.bg {backgrould:#CCC; }

【问题讨论】：

左右栏需要有内容，还是只是为了设置背景？
@Ana 只是我设计的背景...

标签： css html dynamic autofill

【解决方案1】：

如果您只需要左右两列来设置背景，那么很可能根本不需要它们。

只需在.container 上设置background，提供相同的容器text-align: center，使中心列inline-block 并在其上重置background 和text-align 即可。

demo

HTML：

<div class='container'>
    <div class='c'>booooo add remove text here</div>
</div>

CSS：

.container {
    background: #ccc;
    text-align: center;
}
.c {
    display: inline-block;
    background: white;
    text-align: left;
}

【讨论】：