小编car*_*_20的帖子

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

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

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

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

码:

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

结果: 结果

如何解决这个问题.如何使所有布局div(列)彼此独立.有任何想法吗？