3列，中间一个宽度灵活 [英] 3 columns, middle one with flexible width

问题描述

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

好，但问题在哪里。
问题是，如果我把浮动左div放入第一列，块div在第二和第三个，块div的行为以奇怪的方式。它们显示在第一列浮动div下面的列中。

一个例子。
在第一和第二列中，我有浮动div和第三列中的块div。块div围绕浮动div的高度向下移动。

我想让三个布局div中的每一个都是独立的彼此。我不知道为什么第三列中的元素浮动在前两列（具有浮动属性）的div。

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> 
  

和结果：

如果需要display：table，display：table-row和display： table-cell，使用表; - ）

I'd like to have a layout that consist of three adjacent divs. Side divs have static width (it may change via javascript) and center div fills a remaining area. When the first div's size changes it affect only the center one. It is similar to table (with dynamic rendering) that consist of three columns.

Ok, but where is the problem. The problem is that if I put floating-left div into the first column, and block div in the second and third one, block divs behave in a strange way. They are rendered in their column below floating div from the first column.

An example. In the first and second column I have floating div, and block div in the third column. The block div is shifted down around the height of floating divs. Div in the center column is not shifted in his y position only that it has float left property.

I'd like to each of the three layouting divs to be independent on each other. I have no idea why elements in the third column floats div in first two columns (with float property).

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>

and result: result

How to fix that. How to make all layouting divs (columns) to be independent on each other. Any ideas?

解决方案

You can do that by floating col1 and col3 to the left and to the right, with a fixed width.

Then add a left and right margin to col2 equal to the width of col1 and col3.

This gives you three columns; col1 and col3 having a fixed width and col2 filling the available width:

(col2's content box in blue, and its margins in yellow)

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

Try it here: http://jsfiddle.net/22YBU/

BTW if you need display: table, display: table-row and display: table-cell, use a table ;-)

这篇关于3列，中间一个宽度灵活的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！