[英]Vertical alignment of DIV's using relative positioning and inline-block?
I have a problem aligning DIV's vertically, when the contents within them have different height (although the DIV's themselves have a fixed size). 我有一个问题是垂直对齐DIV,当它们内部的内容有不同的高度时(虽然DIV本身有固定的大小)。
See HTML example here (with inline CSS) 请参阅此处的HTML示例(使用内联CSS)
I want the DIV's to "flow" like text, so I'd like to avoid using position:absolute
if possible. 我希望DIV像文本一样“流动”,所以我想避免使用position:absolute
如果可能的话。 I'm using display: inline-block
to the DIV's won't collapse. 我正在使用display: inline-block
对DIV的display: inline-block
不会崩溃。
Add a vertical-align
property - it doesn't matter which one, they all do the same thing, since they're the same size. 添加一个vertical-align
属性 - 哪一个都没关系,它们都做同样的事情,因为它们的大小相同。 If they're different sizes, use vertical-align: middle
: 如果它们的大小不同,请使用vertical-align: middle
:
.collection_box {
vertical-align: middle; /* or top, or bottom, if they're the same size */
}
Float them to the left: 将它们浮在左边:
.collection_box {
float: left;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.