以下內容就是由寶雞網站建設、寶雞網絡公司、寶雞世紀網絡為您編輯整理。

DIV+CSS網頁布局常用到浮動方案，但浮動并不像表格那樣好用，很多時候會出問題。同時設計不夠良好的浮動布局，在不同的瀏覽器下會有不同的表現，可能設計時照著常用的瀏覽器做好了，拿到其它瀏覽器里一看又亂掉了。瀏器自身的問題往往是這些麻煩的罪魁禍首。Firefox對標準的支持較好些，IE7、IE8次之，IE6目前用戶群較多，但也比較糟糕，經常莫名其妙地多出一些空隙等等。拿浮動布局來說，你算好的寬度在Firefox以及 IE7、IE8下可能是正常的，拿到IE6里就會發現不該換行的時候它卻換行了。

然而，不管HTML頁面設計人員怎么罵微軟，網頁還是要做的。我這里就以自己的經驗給大家介紹一些常用的解決方案。

1、如果是兩欄并列，要在中間顯示分界線或圖片，可以使用repeat-y的背景圖片來實現，此樣式寫在這兩欄的父級元素中，可以保證分界線與最高的欄等高。

示例：

假設vline.gif是寬100px高1px，左邊99像素為白色，最右邊1像素是黑色，則此背景圖片實現的效果就是在兩列間拉出一條黑色豎線。

不過要說明一下，這種方法如果父元素寬度設計200px，理論上是正確的，但實際上在IE6里會換行，因為IE6不遵從W3C標準。在IE6里你可以把父元素寬度設得比200px大一些，但這樣格式會不夠完美。你可以用下面的margin法解決這個換行問題。

2、如果有一列想用自適應寬度，而不是固定寬度，可以巧用margin屬性。比如左邊固定100px，右邊自適應，則可以讓父元素“margin- left:100px”，第一列再“margin-left:-100px”，第二列就可以用“width:100%”來實現自適應寬度了。如果不這樣巧用margin，第二列沒法設百分比，因為瀏覽器客戶區寬度*100%+100px是超出瀏覽器客戶區總寬度的，瀏覽器會出現橫向滾動條；又因為瀏覽器客戶區總寬度不確定（確定的話就不用什么自適應了），你也沒法用類似80%這樣的百分比使其正好撇下100px給第一列。

另外你可能想讓這兩列的父級有一個最小寬度以避免兩列換行，這個可以用min-width屬性來實現。

示例代碼：

3、自適應高度的該如何設計呢？很多人為這個問題頭痛過，抱怨height:100%不管用。其實，讓它管用很簡單，只是別忘了給html也加上 height:100%的屬性。沒錯，就是html，你可以寫成這樣：html,body{height:100%}。但這樣還有個問題，沒解決。如果你想讓一行字始中處于最下面，該怎么做呢？答案還是margin。

你可以把主體部分放在一個DIV中，將其最小高度設為100%，然后在后面放頁腳的DIV，假如它的高度為40px，則“margin- top:-40px”，這樣可能會使主體部分下邊的內容被遮住，解決辦法是在主體部分最下面的元素上加“padding-bottom:40px”屬性即可。理論上講加“margin-bottom:40px”也可以，但觀查發現在IE里會出現垂直滾動條。

示例代碼：

注意別忘了樣式表中要加：html,body{height:100%;} 峰之部落 原創文章，轉載請注明出處。 這三招應用技巧，基本能解決DIV+CSS浮動布局的常見問題，且能較好的兼容不同的瀏覽器。

以上內容就是由寶雞網站建設、寶雞網絡公司，寶雞世紀網絡為您編輯整理的《寶雞網絡公司：DIV+CSS浮動布局解決辦法》的全部內容。我公司是在寶雞市工商局注冊的專業提供網站建設、網站優化、網站推廣，軟件開發的高新技術企業，一直致力于面向寶雞地區黨政機關、企事業單位提供大中型門戶網站解決方案、 OA 辦公自動化系統解決方案，以及中小型應用軟件開發及其它信息化外包業務。目前已承建寶雞地區近760多家政府網站、企業網站，是寶雞網站建設行業規模最大、客戶數量最多、技術力量雄厚的寶雞網絡公司。歡迎您來電咨詢，咨詢熱線：0917-3535180 3536690……