Question

有人可以看看以下小提琴：http://jsfiddle.net/R4bCy/1/

我认为div应调整它的高度以容纳它的元素，除非元素绝对定位。

为什么div不会扩展到图像的整个高度？

我需要将图像对齐到右边。我知道如何执行此操作的唯一方法是align='right'，position:absolute; right: 0;和float:right，所有这些使得包含div不会将其高度调整为图像高度。< / p>

Answer 1

.intro {
margin: 10px;
outline: 1px solid #CCC;
background: #A00;
color: #FFF;
height:auto;
overflow:auto;
}
.img{
float:right;
height:auto;
}

<div class="intro">
    <div class="img"> <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s1600/tall+copy.jpg"    style="margin: 10px 10px; "/></div>

  <p>Sorry, but the page you requested could not be found.</p>
</div>

DEMO

Answer 2

'为什么div不会扩展到图像的整个高度？'

因为浮点数将与块重叠，所以只有块格式化上下文包含浮点数。（您可以在这里找到关于整个主题的非常好的概述：http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/）

解决手头的问题：

align=right实际上会导致img为float: right（不推荐align属性并且应该使用css。）

要在其父div中包含浮动图像，您需要让父div建立块格式化上下文（块格式化上下文包含嵌套浮点数）或者使用其他元素明确清除浮点数设为img的{{1}}。

创建块格式化上下文的简单解决方案是浮动父clear: right，尽管在这种情况下我的首选解决方案是将其div设置为overflow（也导致了块格式化上下文。）

查看更新的小提琴http://jsfiddle.net/R4bCy/8/。

Answer 3

您需要做的是在p标签后添加

<div style="clear:both;"></div>

Answer 4

哎呀，道歉，发布并且你编辑了你的问题 - 我认为对齐右边是漂浮的（你应该使用float：right和某种clearfix）。

示例：http://jsfiddle.net/R4bCy/5/

Answer 5

这就是我认为你想要的： http://jsfiddle.net/R4bCy/6/

如果您想要左侧的文字并且图片浮动到右侧，请执行此操作是您的CSS： http://jsfiddle.net/R4bCy/15/

您还可以在容器div中包含两个宽度为50％的div。这样您可以更灵活地放置图像，因为文本和图像都有自己的可修改div s，具有独立属性

图像超越了容器div界限

5 个答案: