Question

应该是这样的：

[img] text text
      text text

这是如何完成的？

似乎直截了当，但我在苦苦挣扎。

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;

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/

将文字对齐图像右侧＆amp;＆amp;文字没有环绕图像

2 个答案: