自动高度 div 不起作用
我试图根据其内容使 div 自动调整大小的高度：
<div id = "bar2">
<div id = "breadcrumbs"><p>Home > About</p></div>
<div id = "anterialtitle"><h1>About</h1></div>
<div id = "rightblockant"><img src = "img/about.jpg" alt = "About Image | Alternative Text" width = "300" height = "200"/><p class = "firstpara">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p><br/></div>
<div id = "leftblockant"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan</p></div>
</div>
</div>
<div id="footer">
<p><a href ="">About</a> | <a href = "">Contact Us</a> | <a href = "">Shipping Information</a> | <a href = "">Returns Policy</a> | <a href = "">Terms & Conditions</a> | <a href = "">Privacy Policy</a></p>
<p>© 2011 <a href="" target="_blank">Everry London</a>. All rights reserved.</p>
</div>
#bar2{
width:960px;
height: auto;
position:relative;
margin:0 auto;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-top:5px solid #313131;
margin-top:15px;
margin-left:4px;
}
然而，这就是结果：
www.everry.com/new/home/about.html
它只封装了 h1 而不是 img 或 p标签..这是为什么？
I'm trying to make the height of a div auto size depending on its contents:
<div id = "bar2">
<div id = "breadcrumbs"><p>Home > About</p></div>
<div id = "anterialtitle"><h1>About</h1></div>
<div id = "rightblockant"><img src = "img/about.jpg" alt = "About Image | Alternative Text" width = "300" height = "200"/><p class = "firstpara">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p><br/></div>
<div id = "leftblockant"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan</p></div>
</div>
</div>
<div id="footer">
<p><a href ="">About</a> | <a href = "">Contact Us</a> | <a href = "">Shipping Information</a> | <a href = "">Returns Policy</a> | <a href = "">Terms & Conditions</a> | <a href = "">Privacy Policy</a></p>
<p>© 2011 <a href="" target="_blank">Everry London</a>. All rights reserved.</p>
</div>
#bar2{
width:960px;
height: auto;
position:relative;
margin:0 auto;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-top:5px solid #313131;
margin-top:15px;
margin-left:4px;
}
However, this is the result:
www.everry.com/new/home/about.html
It only encapsulates the h1 and not the img or the p tags..why is this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
你把一个 div 关闭太多了
编辑：抱歉，我现在看到了您的网页，这是用于标题 div 的，很抱歉
you close one div to much
edit: sorry i saw now your webpage this is for the header div i'm sorry
漂浮。当您将内容浮动在 div 内并且不“清除”它时，它就会这样做。
您可以通过使用
clear:both在浮动元素末尾添加一个 div 元素来解决此问题，也可以将overflow:hidden添加到.bar2>。我建议您还可以在Google上搜索clearfix以获得更好的解决方案。
Floats. When you float content inside a div and you don't "clear" it it will do that.
You can fix this with adding a div element at the end of the floated elements with
clear:bothor you can addoverflow: hiddento.bar2.I suggest you also search for clearfix on Google for a better solution.
尝试
float:left;作为 ID 'bar2'try
float:left;for the ID 'bar2'