8-浮动、图像、div

Question

在使用8时，尝试查看我拥有的项目时出现了一个问题(怎么不呢？)

问题是，图像和跨度，既可以是内联的，也可以是带浮动的块，总是在另一个下面，或者文本的一部分。

我的示例代码是：

HTML

<div>
    <div class="text-left">
        <img src="my_image_path.png"><span>Some text at it's side</span>
    </div>
    <div class="text-right">
        <span>Text to the right</span>
    </div>
</div>

CSS：

.text-left {
    float: left;
}
.text-left img {
    margin-right: 10px;
}
.text-right {
    float: right;
}

上面的代码在IE9，Safari，Chrome，Firefox上运行得很好.但不是在IE8。图像放置得很好，但是跨度不能停留在一行(不是很长的文本)。如前所述，我尝试过使用block和左float，但也不起作用。div容器具有auto宽度。

编辑:唯一的方法，也不是很自豪，为了解决这个问题，我自己找到了，它在图像和span的div容器中增加了最小的宽度。希望这是另一种更准确的方法。

编辑2:这里我向您展示了在IE8和Chrome中的结果。

IE8的结果：

​

​

铬的结果(好)：

​

​

Answer 1

昨天，我不小心知道了为什么会发生这种事。

引导程序自动将CSS属性max-width: 100%;添加到图像中。我试着删除这个属性，神奇的是上面的图像不再发生了。IE8用一些属性做了一些非常奇怪的事情。

基本上，您需要在需要使用某种类(如.no-max-width { max-width: none !important; } )时将该属性移除到所需的图像中。

希望这个答案能对任何面临这个问题的人有所帮助。

Answer 2

试一试

.text-left > span { white-space: nowrap; }

不是很漂亮，但比处理min-width更好的选择。

Answer 3

您需要一个min-width的原因是因为您还没有清除浮点数。

要么使用clearfix，要么在浮动元素下面创建另一个元素并将其设置为clear: both;

更多关于清除：https://css-tricks.com/snippets/css/clear-fix/