Question

我有一个div容器，里面有3个div元素，每个元素都有自己的内容。容器水平居中。我希望这三个元素符合容器的高度。

<body>
    <div id="Container">
        <div id="A"><P>Some multiROW<br>content</P></div>
        <div id="B">single row content</div>
        <div id="C"><P>Some multiROW<br>content</P></div>
    </div>
</body>

JSFiddle

在示例中，中间氰基元素应与其他div具有相同的高度。内容也应该垂直居中。我怎么能得到它？

Answer 1

以下内容如何：http://jsfiddle.net/7ecm7qzh/

（使用table-cell作为显示属性，中间垂直对齐，高度为100％）

<div id="Container">
    <div id="A"><P>Some multiROW<br>content</P></div>
    <div id="B">single row content</div>
    <div id="C"><P>Some multiROW<br>content</P></div>
</div>

#Container {
width: 50%;
margin: auto;
display:table;
}

#Container div{
    vertical-align:middle;
    display:table-cell;
    height:100%;
}

#A {
    width: 15%;
    text-align: right;
    background-color: red;
}

#B {
    width: 70%;
    text-align: center;
    background-color: aqua;
}

#C {
    width: 15%;
    text-align: left;
    background-color: yellow;
}

Answer 2

试试这个，

#Container {
    width: 50%;
    margin: auto;
    overflow: hidden;
    position: relative;
}

#A {
    width: 15%;
    float: left;
    text-align: right;
    background-color: red;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

#B {
    width: 70%;
    float: left;
    text-align: center;
    background-color: aqua;
    margin-bottom: -99999px;
    padding-bottom: 99999px;

}

#C {
    width: 15%;
    float: left;
    text-align: left;
    background-color: yellow;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

参考：http://css-tricks.com/fluid-width-equal-height-columns/

Answer 3

试试这个

http://jsfiddle.net/KHFn8/5161/

#Container {
    width: 50%;
    margin: auto;
    display:table;
}

#A {
    width: 15%;

    text-align: right;
    background-color: red;
    display:table-cell;
}

#B {
    width: 70%;

    text-align: center;
    background-color: aqua;
    height: inherit;
     display:table-cell;
   vertical-align: middle;
}

#C {
    width: 15%;

    text-align: left;
    background-color: yellow;
     display:table-cell;
}

Answer 4

你要这个......

height:auto;

这将使容器自动设置其高度，无论其中有多少DIV ......

::::::::::::::编辑::::::::::::

<style type="text/css">
#container{width:1000px;height:auto;background-color:#CCCCCC;}
#A{width:900px;height:300px;background-color:#00FF00;}
#B{width:900px;height:100px;background-color:#99FFFF;}
#C{width:900px;height:400px;background-color:#CC99FF;}
</style>

垂直展开div

4 个答案: