html - 可自动调节的侧 DIV

Question

我很难找到并排创建 3 个 DIV 的方法，其中中间的 DIV 具有静态大小（比如说 900 像素），而左侧和右侧的 DIV 具有自动调节的宽度。

我需要这样做才能将背景放在侧面 DIV 上，因为中间 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;
}

jsfiddle

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>

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