Html 自动可调侧分

我在找到并排创建3个DIV的方法时遇到了一些困难，中间的DIV有一个静态大小，比如说900px，而左侧和右侧的DIV有自动调整的宽度

我需要这样做，以便在侧div上放置背景，因为中间div已经有一个透明的背景，所以我不能为中间一个包含另一个背景的包装div创建一个包装div。正如您可能想象的那样，您将能够看穿中间DIV的背景

---

有什么想法吗

我猜你需要一个有3列的网站，左边是菜单，中间是内容，右边有广告或附加信息的空间

我会选择这样的方式：

<div class="side" style="width:10%; float:left;">content</div>

<div class="middle" style="width:900px; float:left;">content middle</div> 

<div class="side" style="width:10%; float:left; clear:both; ">content</div>

根据大小和位置，侧边栏使用边类，主内容使用中间类。

这是您想要的吗

HTML:

---

你说的自动调节是什么意思？这两个外部应该占据剩余的边位置，并且宽度相同？你能发布一些代码或示例吗。你的问题太抽象了。这正是我需要的。我不认为这是抽象的：但是，如果窗口只有960px宽，那么左栏和右栏就会与中间栏重叠。同样清楚的是：两者都会破坏布局，迫使列换行到下一行。是的，cchana的观察非常准确。但是，侧面分区不是用于菜单或广告，我只想让它们在中间分区的侧面保留一个背景图像。它们必须能够从宽度0到窗口的任何大小。@cchana啊，是的，你完全正确，我应该投入更多的时间和精力来测试它。有点。。。但侧凹的宽度必须是自动可调的。他们必须有自动宽度，以便他们可以从宽度0到任何大小的窗口，保持中间的DIV始终在窗口的中心。太棒了！你真是个天才！我刚刚对您的代码做了一些调整，现在它工作得很好：这是最终结果：CSS:header容器{display:table；width:100%；margin:0；}header left，header right{background:urlmages/sides-bg.png；width:50%；}header left，header middle，header right{display:table cell；}页眉中间{背景：urlmages/header-bg.png中心；宽度：56.25em；高度：6.9375em；边距：0自动；显示：块；}似乎我必须在显示：表上再挖掘一点；并显示：表格单元格；事情，它似乎很有用：非常感谢你的帮助！

<div class="wrapper">

    <div class="side" style="float:right;width:50px;">side</div>
    <div class="side" style="float:left;width:50px;">side</div>
    <div class="middle" style="margin:0 50px;">content middle</div>

    <div style="clear:both; height: 40px;"></div>

    <div id="container">

        <div class="left">side</div>
        <div class="center">center</div>
        <div class="right">side</div>

    </div>

</div>

.wrapper {
    max-width: 1000px;
}

.side, .middle {
    text-align: center;
}
.side {
    background: red;
}
.middle {
    background: blue;
    color: white;
}

#container {
    display: table;
    width: 100%;
}

.left, .center, .right {
    display: table-cell;
    text-align: center;
    background: red;
}

.center {
    width: 500px;
    background: blue;
    color: white;
}