Question

我不是HTML或CSS的新手（但我也不能声称自己是专家）而且对于我的生活来说，似乎是一个简单的＆＃34; Float＆＃34; div标签让我完全困惑。

我假设很简单：

<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标记，但它产生了相同的结果，文本位于图像下方。我搜索过高低，但似乎无法找到答案，但我知道我可能忽略了一些简单的事情。

Answer 1

根据您在布局中使用div的方式，您需要将img浮动到浮动的div中，并将div的内容保留在使用overflow: auto进行相同的块格式化上下文。

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

＆＃13;

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

＆＃13;

<div><img src="http://placehold.it/100x100">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.</div>

＆＃13;

Answer 2

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

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

在img上使用float: left可以正常工作。

JSFiddle

Answer 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
}

浮动在<div>标记或<img/> </div>中

3 个答案: