Question

我正在尝试根据其内容设置div自动尺寸的高度：

 <div id = "bar2">
      <div id = "breadcrumbs"><p>Home &nbsp;>&nbsp; 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>&nbsp;|&nbsp;<a href = "">Contact Us</a>&nbsp;|&nbsp;<a href = "">Shipping Information</a>&nbsp;|&nbsp;<a href = "">Returns Policy</a>&nbsp;|&nbsp;<a href = "">Terms & Conditions</a>&nbsp;|&nbsp;<a href = "">Privacy Policy</a></p>
            <p>&copy; 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标签..为什么会这样？

Answer 1

你关闭一个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我很抱歉

Answer 2

浮动。当你在div中浮动内容并且你没有“清除”它时它就会这样做。

您可以通过在clear:both的浮动元素末尾添加div元素来解决此问题，也可以将overflow: hidden添加到.bar2。

我建议您在Google上搜索clearfix以获得更好的解决方案。

Answer 3

尝试float:left; ID'bar2'

自动高度div不起作用

3 个答案: