将文本对齐到图像右侧 && 文本不围绕图像换行

Question

应该长这样：

[img] text text
      text text

如何实现这个？

看起来很简单，但我还是有困难。

- JoJ

---

请保持向右 - 绝不能出现任何包装！ - JoJ

好的，你知道你的图片宽度吗？ - Paul

你尝试过对两个元素都使用display:inline-block吗？如果你需要支持IE7和IE6浏览器，那么你需要进行修复（使用display:inline）。 - Beth Budwig

保罗，我知道图片的宽度。 - JoJ

Beth，inline-block在工作，我该如何让它在IE7中工作？ - JoJ

Jason有答案 - display:inline适用于IE7。 - Beth Budwig

Answer 1

您可以使用display:inline-block;。

img{
    display:inline-block;
    width:75px;
    height:100px;
    border:1px solid red;
    vertical-align:top;
    margin-right:10px;
}

div{
    display:inline-block;
    width:200px;
}

示例：http://jsfiddle.net/jasongennaro/SK9ad/

为了使inline-block;在IE7中生效，需要在每个规则中添加以下内容：

zoom: 1;
*display:inline;

- Jason Gennaro

---

如果你使用此方法并希望在div中有内容，请确保将它们设为display:inline-block并具有width:100%。如果这不正确，或者有更好的解决方案，请让我知道。感谢你提供信息！ - Elias Ranz

Answer 2

既然您已经知道了图片的尺寸：

HTML：

<div style="position: relative;">
    <img id="theimg" ... />
    <div id="besidetheimg">
    </div>
</div>

CSS：

#theimg{
    position: absolute;
    top: 50%;
    margin-top: -50px; // Half the width of the image
    width: 100px;
    height: 100px;
}

#besidetheimg{
    margin-left: 100px; // width of image
}

这种方法有点奇怪，但我不确定是否有更好的方法。它可以正常工作：http://jsfiddle.net/dvLqC/

- Paul

---

请注意，top和margin-top用于将图像垂直对齐到middle。 - Paul

如果可以避免的话，同时使用负边距和绝对定位不是最理想的选择。 - Elias Ranz