图像向右浮动到 div答案

【问题标题】：Image floating right to div图像向右浮动到 div
【发布时间】：2013-11-18 02:35:12
【问题描述】：

我有一个文本块（一个 div）需要环绕一个浮动到右侧的图像。但它不起作用。

这就是我现在拥有的：

<img style="float: right;" src="images/IMG_20130906_155859.jpg" alt="IMG 20130906 155859" width="200" height="267" />
<div class="customintro">
<p>Lorem ipsum dolor sit amet, quodsi pertinax ex mei, admodum corpora percipit ad cum. Recteque dignissim eu est. Ad vocent veritus has, quas movet complectitur no eos. Verear feugait ex mea, vix dicat congue eu, ne mel oratio appetere democritum. Qualisque sententiae est ei.Ei usu nostrum accusamus. Feugait temporibus ne sed, at clita eleifend nam, et dolor utinam equidem his. Vis sumo verterem ex, ut esse dolor appellantur his. Consul mentitum mnesarchum ne cum, saepe scaevola reformidans an mea, eu pri postea docendi invenire. Cum te soleat scaevola accusamus, ut sea euismod inimicus aliquando.Id noster incorrupte qui, quidam equidem vituperata ne sea. Odio probo persequeris ei sed, ea laudem electram per. Pro ea illum verear laoreet. Inani legimus contentiones eu per, id diceret consulatu pri, vitae cetero ad ius. In audiam necessitatibus nec, consequat appellantur mel te. Omnes cotidieque vix ea, quo iudico theophrastus et, in dolor option facilisi nam.</p></div>

CSS：

div.customintro {
padding: 10px;
background-color: #AAAAAA;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

这是结果：

如您所见，文本环绕在图像周围（这很棒），但 div 仍然位于图像后面。如何使 div 保持在图像的左侧？我摆弄了不同的显示样式，但我无法让它工作。

当然，当我为 div 设置宽度时它会起作用，但我不希望这样，因为图像的大小会有所不同。

【问题讨论】：

你能分享一下fiddel演示吗？

标签： html css image css-float

【解决方案1】：

这就是display: table-cell 的魅力所在。添加你的div.customintro这个显示属性。 (Jsfiddle)

div.customintro {
    display: table-cell;
    padding: 10px;
    background-color: #AAAAAA;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

请注意，这不适用于 Internet Explorer 7（及更低版本），但您可以添加 display: inline-block 以提供回退。

【讨论】：

显示：表格单元格？好吧，它完美地工作！谢谢你的回答。

【解决方案2】：

将此添加到.customintro div。

float:left;
width:calc(100% - 220px); //200px of image, 20px of padding

Fiddle here.

【讨论】：

感谢您的回答，但重点是我会使用不同尺寸的不同图像。所以这个示例图片的 200px 会有所不同。
在这种情况下使用百分比或使用 Mike 的解决方案。

【解决方案3】：

比已经发布的两个更简单的答案是将您的<div> 和<img> 设置为display: inline-block，以便将它们视为内联元素。您的 float 属性现在应该可以正常工作了。

【讨论】：