Question

我正在尝试设置以下div块，以使左div和右div具有固定宽度，中心div根据需要动态扩展。右div向右和从左到左浮动，以便使用整个屏幕。只要中心div中的文字开始在中心div下方推动右div时，我现在的设置就可以正常工作div 。

+------------------------+
| THIS   IS THE    TITLE |
|                        |
+------------------------+
| LEFT | CENTER  | RIGHT |
| DIV  | DIV     | DIV   |
|      |         |       |
|      |         |       |
|      |         |       |
|      |         |       |
+------+---------+-------+
| THIS   IS THE  BOTTOM  |
|                        |
+------------------------+

我的CSS是：

#leftbar{float:left;width:162px; margin-left: auto; margin-right: auto;}
#center{float:left; margin-left: auto; margin-right: auto;padding-left:10px;}
#rightbar{float:right;width:162px; margin-left: auto; margin-right: auto;}
#clearbothbar{clear:both;}

HTML：

<div id='top'></div>
<div id='leftbar'></div>
<div id='center'></div>
<div id='rightbar'></div>
<div id='clearbothbar'></div>
<div id='bottom'></div>

我知道我可以为中心div设置固定宽度并完成它但我希望中心区域在较小的屏幕尺寸上动态缩小。

Answer 1

需要更多摆弄，但通常你可以将左右div更改为位置：绝对然后将中间div放在中间，左边距离和右边距作为左边的宽度和对吧。

<style>
    html, body {margin:0;padding:0;}
    div {border: solid black 1px; min-height: 50px;}
    #leftbar{
    position:absolute;
    left:0;
    width:162px;
    display: inline-block;
    }
    #center{
    margin: 0 163px;
    width: auto;
    display: block;
    }
    #rightbar{
    position:absolute;
    right:0;
    width:162px;
    display: inline-block;
    margin-top: -52px;
    }
    #clearbothbar{clear:both;height:0;min-height:0;border:none;}
</style>

<div id='top'>top</div>
<div id='leftbar'>left</div>
<div id='center'>center</div>
<div id='rightbar'>right</div>
<div id='clearbothbar'></div>
<div id='bottom'>bottom</div>

Answer 2

你可以做到这一点非常简单，使用float:right和float:left flor side divs并使用margin-right分隔中间的一个。 请注意左右分区顺序在此解决方案中很重要。 您的示例：http://jsfiddle.net/jtorrescr/gAwv2/1/

HTML：

<div id="top">TOP</div>
<div id='leftbar'></div>
<div id='rightbar'></div>
<div id='center'></div>
<div id='clearbothbar'></div>
<div id="bottom">BOTTOM</div>

的CSS：

#top, #bottom
{
    background-color:green;
}
#container
{
    overflow:hidden;
}
#rightbar
{
    float:right;
    width:162px;
    background-color:pink;
    height:300px;
}
#leftbar
{
    float:left;  
    width:162px;
    background-color:orange;
    height:300px;
}
#center
{
    margin-right:162px; 
    background-color:blue;
    height:300px;

}

#clearbothbar
{
    clear:both;
}

水平对齐具有固定和动态宽度的DIV

2 个答案: