Question

我有2个div孩子在一行中漂浮（左和右）。第一个div的高度高于第二个div。所以我想做的是：

根据父容器调整第二个div高度，这样就可以了对于这两个孩子来说都是一样的
垂直对齐第二个div的内容

我试过

.container { overflow: hidden; }
#boxLeft{ width: 50%; float: left;}
#boxRight{ width: 50%; float: right; line-height: 100% }
#box2Right p{ text-align: right; vertical-align: middle;}

但行高：100％不起作用（使用像素，但我必须使用100％，因为我有不同的高度不同的行）。

如果可能的话，我也想避免使用表格。

这是我的小提琴：http://jsfiddle.net/qYBfu/2/

谢谢

Answer 1

您可能希望像这样使用display:table：

样本：http://jsfiddle.net/qYBfu/4/

.container { 
    display:table;
}
#boxLeft{ 
    display:table-cell;
}
#boxRight{ 
    display:table-cell;
}

您可以查看此问题：Are floats bad? What should be used in its place

希望这会有所帮助：

Answer 2

为了使两个div容器相同＆＃34; height＆＃34;，您可以使用以下代码：

 #boxRight{ width: 50%; float: right;  background: silver; line-height: 100%; margin-bottom: -99999px; padding-bottom: 99999px; }

http://jsfiddle.net/qYBfu/5/

我不清楚的是，如果你想在列的中间对齐正确的内容。

在这种情况下，我认为你必须只对齐一行，你可以使用高度和高度。行高等于左列（意味着提前知道高度）或使用JS解决方案。

Answer 3

您可以通过将父级定位并将position:absolute; top:0; bottom:0应用于左侧div来将左侧div拉伸到父级的完整高度。

用于垂直对齐文本，您可以使用css3 flex box（如果古老的浏览器支持不是问题，希望）

.container {
 position:relative;
 overflow: hidden;
}
#boxLeft {
 width: 50%;
 display:inline-block;
 background: silver;
}
#boxRight {
 display:-webkit-flex;
 -webkit-align-items:center;
 -webkit-justify-content:center;
 position:absolute;
 top:0;
 right:0;
 bottom:0;
 width: 50%;
 background: pink;
 text-align:center;
}

JSFiddle

Answer 4

这种技术只使用css：before伪元素，没有绝对定位

.container { white-space: nowrap; text-align: center; }

您可以避免文本对齐，只需要将框添加为

即可添加

.container:before{ content:""; width: 1px; height: 100%; display: inline-block; vertical-align: middle; }

.item{ display: inline-block; vertical-align: middle; white-space: normal; text-align: center; width: 30%; }

DEMO：http://jsfiddle.net/qYBfu/9/

根据父div调整div高度，然后垂直对齐div内容

4 个答案: