0

我有一个包含两个元素的简单页面 - 地址和 img。我已将地址元素的显示更改为内联，并期望这两个元素将垂直对齐，两者都是内联元素。

这不是真的，请注意 - http://jsfiddle.net/mark69_fnd/Q8ygG/19/

怎么了？

谢谢。

编辑1

我希望地址和徽标水平对齐，即在同一水平面上：

+-------+  +----+
|ADDRESS|  |LOGO|
+-------+  +----+

编辑2

我想我把每个人都搞糊涂了。我希望元素在同一行，这可能意味着垂直对齐而不是水平对齐。我已经修正了问题的措辞。对不起。

编辑3

一个重要的补充。调整窗口大小时，我希望地址和徽标保留它们的相对位置，而不是徽标浮动在地址下方。如果需要，应该会出现滚动条。

4

3 回答 3

2

我更新了你的小提琴： http: //jsfiddle.net/Q8ygG/4/我猜你就是你想要的？...

我不是使用 inline 或 inline-block 的忠实粉丝。当你想让它们在旧版本的 IE 中工作时，它们会给你带来巨大的痛苦。我更喜欢使用浮点数，它们更容易预测并且可以跨浏览器工作。

编辑：

刚刚看到你的编辑。您必须更改我小提琴中 img 和地址的顺序才能获得您所追求的东西，但这可能很明显......

于 2012-08-19T14:16:27.323 回答
1

我总是将它包含在我的样式表中：

img{border:0;vertical-align:bottom}

这可确保在大多数情况下正确对齐。唯一可能出现问题的情况是图像短于行高。

于 2012-08-19T21:44:15.557 回答
0

将两个元素的显示更改为inline-block：

#own_address {
    outline: green solid 1px;
    display: inline-block;
}

#logo {
    outline: green solid 1px;
    display: inline-block;
}
于 2012-08-19T14:08:13.377 回答