在 CSS 中，我可以排列行内块的高度吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11173688/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In CSS, can I line up heights of inline-blocks?
提问by Steve Hwan
In CSS, can I line up heights of inline-blocks?
在 CSS 中，我可以排列行内块的高度吗？
I thought by setting margins to 0 and height to auto, that the block would expand to fit the available space, but it still tightly wraps around the block.
我认为通过将边距设置为 0 并将高度设置为自动，块会扩展以适应可用空间，但它仍然紧紧包裹在块周围。
.myclass {
display: inline-block;
margin: 0em;
padding: 1em;
height: auto;
border: solid;
}
I would like both boxes to be the same height, but want the div width/heights to be determined by their content, not specifying a width/height in pixels.
我希望两个框的高度相同，但希望 div 的宽度/高度由它们的内容确定，而不是以像素为单位指定宽度/高度。
Is there some kind of padding/margin/alignment CSS or something like that that I can use?
是否有某种填充/边距/对齐 CSS 或类似的东西我可以使用？
回答by brezanac
You could use display:table-cell;if you require a pure CSS solution but do take note that it won't work in IE7 (I guess IE6 is by now completely forgotten).
display:table-cell;如果您需要纯 CSS 解决方案，您可以使用它，但请注意它在 IE7 中不起作用（我猜现在 IE6 已经完全被遗忘了）。
.myclass {
display: table-cell;
margin: 0em;
padding: 1em;
height: auto;
border: solid;
}
Cross browser support for display:table-cell
Your best bet for achieving what you need is JavaScript however explicitly setting width of containers with dynamic content is almost always not the right way to solve the issue.
实现所需内容的最佳选择是 JavaScript，但是显式设置具有动态内容的容器的宽度几乎总是不是解决问题的正确方法。
回答by mondi
Just add vertical-align:top;
只需添加 vertical-align:top;
Example:
例子：
.myclass {
display: inline-block;
margin: 0em;
padding: 1em;
height: auto;
border: solid;
vertical-align:top;
}<div>
<div class="myclass">
line 1<br />
line 2<br />
line 3<br />
</div>
<div class="myclass">
line 1<br />
line 2<br />
line 3<br />
line 4<br />
line 5<br />
line 6<br />
</div>
</div>回答by comradelion
You can use display: table-cell;to make the boxes match each other's height.
您可以使用display: table-cell;使盒子彼此的高度相匹配。
回答by Geocrafter
If you want support for IE7, you cannot use inline-block or table-cell.
如果您想支持 IE7，则不能使用 inline-block 或 table-cell。
Just use float:left to be safe...
只需使用 float:left 以确保安全...
otherwise you will land up using a separate css just for IE7.
否则，您将使用单独的 css 仅用于 IE7。
回答by user3686007
Its easy to add a style sheet for lte ie8, reset your properties to display:block, float:left, and make the total width out of 99% instead of 100%. This will give you the required functionality all the way back.
很容易为 lte ie8 添加样式表，将您的属性重置为 display:block、float:left，并使总宽度超出 99% 而不是 100%。这将为您提供所需的功能。
