Question

我在找到并排创建3个DIV的方法时遇到了一些麻烦，其中中间DIV具有静态尺寸（比如说900px），而左侧和右侧的DIV具有可自动调节的宽度。 / p>

我需要这样做才能将背景放在侧面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>

根据尺寸和位置，使用侧边栏的侧边栏和主要内容的中间层。

自动调节侧DIV

2 个答案: