我的网页有问题，因为当内容因要显示的数据量而扩展时，我对页面的所有元素(标题、导航菜单和内容)都有一个包装器，它会越过包装器没有将其向下推，但在 IE7 上它确实展开了包装器。
这让我发疯，我不明白为什么要这样做。
对不起代码，因为它可能有太多 div，但我不知道任何其他创建圆 Angular 的方法。
代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
*
{
padding:auto;
margin:auto;
text-align:center;
}
div
{
text-align:left;
display:block;
}
</style>
</head>
<body style="">
<form id="form1" runat="server">
<!--Main div container-->
<div style="background-image:url('Images2/Content/WrapTop.gif');width:1210px;height:18px;background-repeat:no-repeat;margin-top:10px;" ></div>
<div style="background-image:url('Images2/Content/WrapMid.gif');width:1210px;min-height:900px;display:block;background-repeat:repeat-y;">
<!--Menu container-->
<!--Heading-->
<div style="width:1210px;height:132px;background-image:url('Images2/Heading/Heading.gif');background-repeat:no-repeat;">
<div style="width:1046px;height:6px;background-repeat:no-repeat;"></div>
<div style="width:1046px;height:96px;background-image:url('Images2/Heading/tiltle.gif');background-repeat:no-repeat;"></div>
<div style="width:1046px;height:3px;display:block;"></div>
<!--Top Menu-->
<div style="width:1200px;height:25px;text-align:justify;padding-bottom:-10px;">
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;display:block;float:left"> </a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;display:block;float:left"> </a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;display:block;float:left"> </a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;display:block;float:left"> </a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;display:block;float:left"> </a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;display:block;float:left"> </a>
</div>
</div>
<!--Container of menu and subcontainer-->
<div style="width:1212px;min-height:750px;margin-top:60px;margin-left:15px;">
<!--Menu-->
<div style="width:274px;float:left;">
<div style="float:left">
<div style="width:272px;height:39px;background-image:url('Images2/menu/MenuTop.gif');color:White;"><asp:LinkButton ID="LinkButton1" runat="server" Text="Electronics" OnClientClick="FindSubCats(560864, 'SearchSubCatsOne');return false;" /></div>
<div id="SearchSubCatsOne" style="width:272px;height:auto;background-image:url('Images2/Menu/menuMid.gif');background-repeat:repeat-y;"></div>
<div style="width:272px;height:14px;background-image:url('Images2/Menu/menuBottom.gif');"></div>
</div>
<div style="float:left">
<div style="width:272px;height:39px;background-image:url('Images2/Menu/MenuTop.gif');"></div>
<div id="SearchSubCatsTwo" style="width:272px;height:auto;background-image:url('Images2/Menu/menuMid.gif');background-repeat:repeat-y;"></div>
<div style="width:272px;height:14px;background-image:url('Images2/Menu/menuBottom.gif');"></div>
</div>
<div style="float:left">
<div style="width:272px;height:39px;background-image:url('Images2/Menu/MenuTop.gif');"></div>
<div id="SearchSubCatsThree" style="width:272px;height:auto;background-image:url('Images2/Menu/menuMid.gif');background-repeat:repeat-y;"></div>
<div style="width:272px;height:14px;background-image:url('Images2/Menu/menuBottom.gif');"></div>
</div>
</div>
<!--Content Menu-->
<div style="width:802px;float:left;min-height:650px">
<div style="float:left;margin-left:10px;">
<div style="width:800px;height:37px;background-image:url('Images2/Content/contentTop.gif');"></div>
<div style="width:800px;min-height:650px;background-image:url('Images2/Content/contentMid.gif');background-repeat:repeat-y;display:block;">
<div id="Products" style="width:800px;min-height:650px;display:block;"></div>
</div>
<div style="width:800px;height:13px;background-image:url('Images2/Content/contentBottom.gif');"></div>
</div>
</div>
</div>
</div>
<div style="background-image:url('Images2/Content/WrapBottom.gif');width:1210px;height:15px;background-repeat:no-repeat;" ></div>
</form>
</body>
</html>
最佳答案
快速看一下，这可能是由于包装内有 float div，这意味着它们很乐意漂浮在包装外。
作为快速技巧，将其添加为包装器中的最后一个元素:
<div style="clear: both"></<div>
如果这样可以解决问题，您可以在 CSS 中添加一个更简洁的“clear: both”解决方案。
关于css - 内容扩展时内容和包装器未正确扩展，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2262931/