27

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

我认为一个 div 应该调整它的高度以适应它的元素，除非元素是绝对定位的。

为什么 div 没有扩展到图像的全高？

我需要将图像向右对齐。我知道如何做到这一点的唯一方法是align='right',position:absolute; right: 0;和float:right，所有这些都使包含的 div 不会将其高度调整为图像高度。

4

5 回答 5

32 
.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>​​​​​​​​​​

演示

于 2012-10-02T18:09:18.550 回答
12

“为什么 div 没有扩展到图像的全高？”

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

关于解决手头的问题：

这align=right实际上会导致 img 存在float: right（该align属性已被弃用，应使用 css）。

要将浮动图像包含在其父级中div，您需要让父级div建立块格式化上下文（块格式化上下文包含嵌套的浮动）或在img样式为clear: right.

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

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

于 2012-10-02T18:23:55.520 回答
2

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

<div style="clear:both;"></div>
于 2012-10-02T18:14:42.243 回答
1

哎呀，道歉，发布并且您编辑了您的问题 - 我相信 align right 是浮动的（您应该使用 float:right 和某种clearfix）。

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

于 2012-10-02T18:06:40.453 回答
1

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

如果您希望文本在左侧，图像浮动到右侧，请使用您的 CSS：http: //jsfiddle.net/R4bCy/15/

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

于 2012-10-02T18:21:57.223 回答