虽然许多其他问题都解决了元素的垂直对齐问题,但似乎没有任何问题可以解决我的特殊情况。
我试图实现以下布局,其中不相等高度的内联元素相对于容器是底部对齐的:
+-------------------+
| +-------+ |
| | | |
|+---+| B |+---+|
|| A || || C ||
|+---++-------++---+|
+-------------------+
可以看到一个例子here。显示了三个元素,但假设各种尺寸更多,但都在一行中。
为了说明起见,该示例故意不完整。至少一个元素,比如中间元素B,必须具有不固定的内容高度和宽度,而是由(填充的)文本或一些其他内容确定。效果可见here。
每个侧翼元素A和C的底部与B的文本基线对齐。这会在容器底部上方升高A和C,这是第一个问题。第二个问题是元件必须相对于彼此水平齐平。 (IIRC,相邻内联元素之间的水平间距未指定,因此依赖浏览器,但目前我无法在CSS规范中找到合适的段落。)
我可以通过浮动每个元素来解决第二个问题。效果可见here。
现在,正如预期的那样,侧翼元素A和C top 对齐。我找到的 bottom 为浮动元素辩护的各种解决方案会产生我的布局要求所违反的假设(例如包含非确定宽度的元素)。
我确实想到了一个只是感觉不对的解决方案:通过变换双重翻转。容器和每个包含的元素通过比例变换垂直翻转。翻转容器会使浮动元素对齐到底部,并且翻转每个包含的元素会重新定向包含的元素。效果可见here。
这有效,但它让我的一小部分死在里面。对此有更好的解决方案吗?
答案 0 :(得分:3)
从你的第二个例子开始..
将vertical-align: bottom
添加到div
,请参阅:http://jsfiddle.net/awkjj/4/
最简单的修补方法是删除HTML中的空格:http://jsfiddle.net/awkjj/7/
如果这令人反感,可以other ways消除差距。