在 <div> 标签或 <img> 中浮动答案

【问题标题】：Float in a <div> tag or <img>在 <div> 标签或 <img> 中浮动
【发布时间】：2014-10-15 04:50:56
【问题描述】：

我对 HTML 或 CSS 并不陌生（但我也不能自称是专家），对我来说，div 标签中看似简单的“Float”让我完全困惑。

我假设一个简单的：

<div style="float: left;"><img src="....>Text Text text<br>Text Text Text</div>

将我的图像放在左侧，默认情况下从图像的右上角开始将我的文本开始在右侧换行，但措辞从图像的右下角开始并在下方换行。鉴于这是我的第一篇文章，我无法插入屏幕截图，但如果需要，我可以发送它们。

鉴于我有一个样式表，我已经按照以下方式完成了代码，但我也尝试在 HTML 中应用该样式（根据上面的示例），结果相同：

CSS
.img-float-left{float:left;}

HTML
<div class="img-float-left"><img src="....>Text Text text<br>Text Text Text</div>

我到底做错了什么？我还尝试将此类应用于 IMG 标签，但它产生了相同的结果，即文本位于图像下方。我搜索了高低，但似乎找不到答案，但我知道我可能忽略了一些简单的事情。

【问题讨论】：

把你的代码放在jsfiddle.net
浮动图片，而不是 div 容器。
.img-float-left img {float: left}
如果您不关闭 HTML 标签中的引号，可能会发生奇怪的事情

标签： html image

【解决方案1】：

您尝试浮动图像而不是父 div 是正确的。将 img-float-left 类放在 img 上。

img 标记也未关闭，src 属性缺少右引号，但这可能只是复制/粘贴错误。将有助于查看您的实际代码。

鉴于此示例，在 img 上仅使用 float: left 效果很好。

JSFiddle

【讨论】：

【解决方案2】：

根据您在布局中使用div 的方式，您需要将img 浮动在浮动的div 内，并使用@987654325 将div 的内容保持在同一块格式化上下文中@。

结果是div 形成了一个独立的块，其中包含图像和文本和div，然后可以根据需要在布局中向左或向右浮动。

div {
  float: left;
  overflow: auto;
  border: 1px dotted blue;
  width: 50%;
}
div img {
  float: left;
  padding: 0 10px 10px 0;
}

&lt;div&gt;&lt;img src="http://placehold.it/100x100"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.&lt;/div&gt;

【讨论】：

【解决方案3】：

首先你浮动<div>标签并将图像容器放置（女巫是div在左侧，而不是图像）您可以使用 align 代替浮点数作为 <img> 标签。 here 是如何使用它。这是我为您创建的 fiddle。

<div class='image-left'>
 <img src='http://placehold.it/100x100'/>
 text text text text text text text text text text text text  ...... 
</div>

css:

.image-left img {
 vertical-align:top
}

【讨论】：