自动调节侧DIV

Question

我在寻找并排创建 3 个 DIV 的方法时遇到了一些麻烦，其中中间的 DIV 具有静态大小（假设 900px），左侧和右侧的具有自动可调宽度。

我需要这样做才能将背景放在侧面 DIV 上，因为中间的div 已经有一个透明的背景，所以我无法为中间的 DIV 创建一个包含另一个背景的包装器 DIV。正如您可能想象的那样，您将能够通过中间DIV的背景看到。

有什么想法吗？:)

Answer 1

这是

你想要的吗？

.HTML：

<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>

.CSS：

.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;
}

斯菲德尔

Answer 2

我猜你需要一个有 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>

根据大小和位置，将侧类用于侧边栏，将中级类用于主要内容。