css - 如何在不包裹图像的情况下将段落 float 到图像旁边？

Question

我想在图像旁边 float 一个段落，但不环绕图像。像这样:

div.img {
        float: left;
        display: block;
        margin: 15px 2% 0 2%;
        width: 26%; /* I cannot use that */
}

div.info {
        float: right;
        display: block;
        margin: 15px 2% 0 2%;
        width: 66%; /* The width should be variable */
}

问题是，如果我将 width 设置为 img 和 info 但图像是可变宽度/高度，我可以做到这一点。它没有特定的宽度/高度。

在这种情况下，我几乎迷路了。请向我提出任何建议。我希望两个 div 彼此相邻 float 而不换行.. 不指定框宽度。

任何解决方案..解决方法？

Answer 1

不用 JS 也能做到。看我的 fiddle http://jsfiddle.net/VaSn6/5/

将图片和段落并排放置:

<img />
<p>text</p>

使用 CSS:

img {
    float: left;
    margin-right: 10px;
    clear:both;
}
p {
    margin-left: 0px;
    overflow:auto;
    display:block;

}

我的 jsfiddle 将示例扩展到清除段落和右对齐图像。

我需要像这样对 CMS 和营销团队友好的东西(营销人员害怕 div!)

这至少适用于 IE8。

如果您需要在文本旁边垂直居中的图像，您将需要一些 div:http://jsfiddle.net/VaSn6/12/这只会使比图像更长的文本垂直居中。

或者，如果您对 CSS 表格没问题，我会选择 http://jsfiddle.net/sY4H8/1/ (也可以降低到 IE8)。即使文本的高度低于图像，这也能奏效。