在包装器内垂直居中两个div(动态内容和内容在包装器下面)
我试图将动态高度中的两个div放在一个动态包装器中...我一直在玩各种各样的技巧来尝试让这个有效的跨浏览器无济于事,有人有什么建议吗？见图解说明!紫色块是我希望在动态包装器下方20px处放置内容的另一个块.
- 注意:对于红色框左边的注释,我的意思是"它应该扩展到与包含div(绿色或红色)更高的高度一样高.
- 我也不知道红色或绿色的盒子是否会更高 - 只是绿色盒子的高度是动态的,红色的高度是固定的.
kiz*_*izu 34
在块上使用display: inline-block+ vertical-align: middle,因此它们将按照您希望的方式对齐.
看看这个例子:http://jsfiddle.net/kizu/Tky8T/
更重要的是:红色div的高度也可以是动态的!
- @AttilaFulop我遇到了一个问题而且它工作了很长时间......然后我意识到因为我有``div>`标签所以我使用`float:left;`这就是阻止`inline-block`的原因好好工作.只有浏览器不告诉你! (3认同)
- 我喜欢这个实现,但如果文本很长,它不能正确地包装到下一行. (2认同)