水平对齐固定宽度和动态宽度的DIV [英] horizontally aligning DIVs with fixed and dynamic width

问题描述

我正在尝试设置以下 div 块，以便左侧 div nd右侧 div 为固定宽度，中心 div 会根据需要动态扩展。正确的 div 浮动到右侧和左侧，以便使用整个屏幕。只要中心 div 中的文本跨越整个中心 div 时，我现在的设置就可以正常工作它开始在中心 div 下推出正确的 div 。

I am trying to set up the following div blocks so that the left div nd the right div are of fixed width and the centre div dynamically expands as needed. The right div floats to right and the left to left, so that the entire screen is used. The setup I have right now works fine as long as the text in the centre div spans through the entire center div when it starts pushing the right div under the center 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;}

$ b

HTML：

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 并完成它，但我希望中心区域在较小的屏幕尺寸上动态缩小。

I know I could put a fixed width for the center div and be done with it but I would like the center area to dynamically shrink on smaller screen sizes.

推荐答案

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

You can do it really simple, use float:right and float:left flor side divs and separate the middle one using margin-right. Please put attention that the left and right divs order is important in this solution. Your example here: 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！