3个div，1个固定宽度答案

【问题标题】：3 div , one fixed width3个div，1个固定宽度
【发布时间】：2012-04-24 11:41:14
【问题描述】：

我不确定这在 html css 中是否可以实现。

我在一行中有 3 个 div 第二个 div 必须占据 200px 宽度，第一个和最后一个 div 必须占据剩余宽度。

http://jsfiddle.net/Garav/gk9t3/

其余两个 div 在 fiddle 中固定为 100px。有没有办法让它们在两侧均匀地填充屏幕的剩余部分，以便第二个 div 始终保持在中心？

注意：父div的宽度不是固定的。

【问题讨论】：

您是希望边缘的 div 包含某些内容，还是只是填充空白空间，而中间的 div 居中。如果中间 div 在另一个 100% 宽度的 div 内，并且居中，可以吗？
中间1个居中，其余2个div基本都会有背景重复图片占据剩余空间
好的。我会发布一个解决方案。检查一下

标签： html css

【解决方案1】：

证明：http://jsfiddle.net/5Br5A/

CSS

.image-placeholder{
    background: #0f0;
    width: 200px;
    height : 200px;
    clear:none;
    float: left;
}
.fill-remaining {
    height:200px;
    width:50%;
    clear:none;
}
.fill-remaining.left {
    background:#f00;
    float: left;
    margin-right:-100px;
}
.fill-remaining.left>div {
    padding-right: 100px;
}
.fill-remaining.right {
    background:#00f;
    float: right;
    margin-left:-100px;
}
.fill-remaining.right>div {
    padding-left: 100px;
}

HTML

<div class="fill-remaining left">
</div>
<div class="fill-remaining right">
</div>
<div class="image-placeholder">
</div>

【讨论】：

很酷的解决方案兄弟.. 现在我必须权衡 -ve 边距和表格属性
已更新，以防您将侧边栏用于内容。

【解决方案2】：

只需使用 margin: 0 auto;不需要边距 div：http://jsfiddle.net/gk9t3/3/

【讨论】：

可以将背景图片添加到父div中。
假设页面有背景..并且中心图像在某处有透明部分..所以显然你不希望“.fill-remaining”背景在透明部分下可见中心图片
嗯，取决于你的页面。没有关于应该如何进行平铺的信息。无论如何，仅出于样式目的添加两个 div 是不好的（div 汤）。另一种解决方案请参见jsfiddle.net/gk9t3/27。页面有红色背景，中心 div 也是。

【解决方案3】：

我已将中间 div 添加到另一个 div 中，并将其居中。看看这是否符合您的要求：http://jsfiddle.net/gk9t3/1/

【讨论】：

200px 不一定总是 20% .. 想想移动设备
您可以在css部分将所需的宽度设置为.image-placeholder。它可以是 200 像素，或者 20%，或者你想要多少 :)
这就是我不想为移动设备、平板电脑、台式机单独设置的内容