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

Question

我有 2 个 div 子元素在 1 行中 float (左和右)。第一个 div 的高度高于第二个 div。所以我想做的是:

1. 根据父容器调整第二个 div 的高度，这样它就会对两个 child 都一样
2. 垂直对齐第二个 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;}

但是 line-height: 100% 不起作用(正在处理像素，但我必须使用 100%，因为我有不同高度的不同行)。

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

这是我的 fiddle :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

希望对您有所帮助: