當內容擴展時，內容和包裝不能正常擴展

由於我的網頁有一個問題，因爲當內容由於數量擴展而導致頁面的所有元素（標題，導航菜單和內容）的數據顯示它將會覆蓋包裝而不會將其壓低，但是在IE7上它會擴展包裝。當內容擴展時，內容和包裝不能正常擴展

這讓我瘋狂，我無法弄清楚它爲什麼這樣做。

對不起，因爲它可能有太多的div，但我不知道任何其他方式來創建圓角。

代碼：

<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">&#160;</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">&#160;</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">&#160;</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">&#160;</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">&#160;</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">&#160;</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>

來源

2010-02-14 Amra

快速瀏覽一下，可能是因爲你在包裝內部有浮動的div，這意味着他們很樂意浮在它外面。

作爲一個快速黑客，將其添加爲您的包裝內的最後一個元素：

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

是否能解決它，你可以添加清潔劑「明確：既」解決方案到您的CSS。

來源

2010-02-15 02:54:47 Tom

非常感謝你，當我回家時我會嘗試。 – Amra 2010-02-15 09:10:09

Muchas Gracias湯姆。 – Amra 2010-02-15 09:46:54

你可能尋找最大寬度或最大高度，而對於這樣的問題，你可能想看看溢出設置。

此外，FWIW，如果您繼續保持CSS內聯，此代碼將很難維護。您應該使用具有外部CSS文件的類和ID。這樣，您可以快速更改整個網站的設計 - 而且只需加載客戶端瀏覽器緩存一次的信息即可。

來源

2010-02-15 00:15:16 alirobe

感謝您的建議，直到我得到一個堅實的模板，它的內聯樣式，然後我將刪除所有樣式將其移動到外部文件。 – Amra 2010-02-15 09:09:42

當內容擴展時，內容和包裝不能正常擴展

回答

相關問題