3列,中间一列,宽度灵活

时间:2011-09-03 08:26:25

标签: css positioning css-float css-tables

我想要一个由三个相邻div组成的布局。边div具有静态宽度(可以通过javascript更改)并且中心div填充剩余区域。当第一个div的大小改变时,它只影响中心的大小。它类似于表(带有动态渲染),由三列组成。

好的,但问题出在哪里。 问题是,如果我将浮动左div放入第一列,并在第二列和第三列中阻塞div,则块div以奇怪的方式运行。它们在第一列浮动div下方的列中呈现。

一个例子。 在第一列和第二列中,我有浮动div,并在第三列中有块div。块div在浮动div的高度附近向下移动。中间列中的Div不会在其y位置移动,只是它具有浮动属性。

我希望三个布局div中的每一个都相互独立。我不知道为什么第三列中的元素在前两列中浮动div(使用float属性)。

CODE:

<div style="margin: auto; display: table; width: 260px;">
        <div style="display: table-row;">
            <div style="display: table-cell; width: 100px;">

                <div style="float: left; width: 40px; height: 50px;">COL1</div> 

            </div>
            <div style="display: table-cell;">

                <div style="float: left; height: 50px;  width: 40px;">COL2</div>

            </div style="display: table-cell; width: 100px;">
            <div class="sideContainer">

                <div>COL3</div>

            </div>
        </div>
</div>

结果: result

如何解决这个问题。如何使所有布局div(列)彼此独立。有什么想法吗?

1 个答案:

答案 0 :(得分:56)

你可以通过向左和向右浮动col1和col3,以固定宽度来实现。

然后向col2添加左右边距等于col1和col3的宽度。

这给你三列; col1和col3具有固定宽度,col2填充可用宽度:

col2's content box in blue, and its margins in yellow
(col2的内容框为蓝色,边距为黄色)

<div class='container'>
    <div class='right'>
        col3
    </div>
    <div class='left'>
        col1
    </div>
    <div class='middle'>
        col2
    </div>
</div>



.container {
    overflow: hidden;
}
.right {
    float: right;
    width: 100px;
}
.left {
    float: left;
    width: 100px;
}
.middle {
    margin: 0 100px;
}

在此处试试:http://jsfiddle.net/22YBU/

BTW如果你需要显示:table,display:table-row和display:table-cell,使用表格; - )