Question

我正在寻找这个常见问题的一般而完整的解决方案！我有这样的HTML代码：

<div id="CONTAINER">
    <div id="CONTAINER_LEFT"></div>
    <div id="CONTAINER_RIGHT"></div>
    <div id="CONTAINER_CENTER"></div>
</div>

我想编写CSS，让我垂直对齐内部div元素，使其上边缘符合。其他考虑因素：

左右容器的宽度固定。
中心容器必须填充Left和之间的剩余宽度正确的容器。
每个内部容器的高度取决于其内容因容器而异。
不打算重叠，目标如下图像。
外部容器的高度应等于最大高度内容器，如果可能的话!!

top edges line up

颜色只是用来展示这个想法！

我用过“float：left;”并且“浮动：正确;” Right和Left容器的属性，但如果Center容器的内容太多，则此容器的区域填充浮动元素下方的空间！另外，我需要在根容器下面有一个宽度为100％的页脚;任何解决方案都应该考虑这个！

Answer 1

这很容易做到 - http://jsfiddle.net/spacebeers/dBvXY/2/

这使用了此处概述的等高CSS列技术 - http://www.ejeliot.com/blog/61

您将主列设置为具有大量底部填充和相等的负底部边距。您的容器需要将溢出设置为隐藏。相应地调整数字，但引用Brain Fantana“每次都有60％的时间”。

.container {
    width: 100%;
    overflow: hidden;    
}

.left{
    float: left;
    padding: 0px 10px 0px 0px;
    width: 90px;
    background: red;
}

.middle{
    top: 10px;
    margin-left: 100px;
    margin-right: 100px;
    background: green;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}

.right{
    float: right;
    background: blue;
    padding: 0px 10px 0px 10px;
    width: 90px;
}

<div class="container">
    <div class="left">
        Some content for the left column.
    </div>
    <div class="right">
        Some content for the right column.
    </div>
    <div class="middle">
        Some content for the middle column.
    </div>
</div>

Answer 2

如果您打算让（中心）容器填充其下方的可用空间，您可能正在寻找虚拟列技术。

这个想法是你不试图控制列的高度，而是应用背景图像来模拟相等长度的列。

转到着名的article on a list apart on faux columns并进一步阅读以实现这一点，这很容易。

Answer 3

您好，您可以根据您的布局定义任何像这样

<强> CSS

.wraper{
    display:table;
    margin:0 auto;
    overflow:hidden;
}
.left{
    display:table-cell;
    background:red;
}

.center{
    display:table-cell;
    margin:0 auto;
    width:200px;
    background:green;
    height:50px;
}


.right{
    display:table-cell;
    background:yellow;
}

<强> HTML

<div class="wraper">


    <div class="left">left</div>
    <div class="center">Center</div>
    <div class="right">right</div>

</div>

现场演示http://jsfiddle.net/rohitazad/WeQN2/

Answer 4

这似乎是最简单的解决方案，适用于IE7-9，FF，Chrome，Safari和Opera：

.container {
   overflow: hidden;
   background: grey;
}

.left {
   float: left;
   width: 200px;
   background: red;
}

.middle {
   margin-left: 200px;
   margin-right: 200px;
   background: green;
}

.right {
   float: right;
   width: 200px;
   background: blue;
}

Answer 5

嗨，请尝试使用此代码

HTML

<div id="left"></div>
<div id="right"></div>
<div id="center">here you van place your text</div>

CSS

#left + #right + #center {
    MARGIN-LEFT: 203px;
}
#left + #content {
    MARGIN-LEFT: 203px;
}
#right + #center {
    MARGIN-RIGHT: 203px
}

#left
{
    float:left;
    width:200px;
    background:#00CC99;
    height:300px;
}
#right
{
    float: right;
    width:200px;
    background:#33FF66;
    height:400px;
}
#center
{
    height:550px;
    padding:10px;
    background:#006666;
    color:#fff;
}

如何使用CSS垂直对齐div容器？

5 个答案: