以下內容就是由寶雞網(wǎng)站建設、寶雞網(wǎng)絡(luò )公司、寶雞世紀網(wǎng)絡(luò )為您編輯整理。

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

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

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

示例：

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

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

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

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

示例代碼：

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

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

示例代碼：

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

以上內容就是由寶雞網(wǎng)站建設、寶雞網(wǎng)絡(luò )公司，寶雞世紀網(wǎng)絡(luò )為您編輯整理的《寶雞網(wǎng)絡(luò )公司：DIV+CSS浮動(dòng)布局解決辦法》的全部?jì)热荨?/SPAN>我公司是在寶雞市工商局注冊的專(zhuān)業(yè)提供網(wǎng)站建設、網(wǎng)站優(yōu)化、網(wǎng)站推廣，軟件開(kāi)發(fā)的高新技術(shù)企業(yè)，一直致力于面向寶雞地區黨政機關(guān)、企事業(yè)單位提供大中型門(mén)戶(hù)網(wǎng)站解決方案、 OA 辦公自動(dòng)化系統解決方案，以及中小型應用軟件開(kāi)發(fā)及其它信息化外包業(yè)務(wù)。目前已承建寶雞地區近760多家政府網(wǎng)站、企業(yè)網(wǎng)站，是寶雞網(wǎng)站建設行業(yè)規模最大、客戶(hù)數量最多、技術(shù)力量雄厚的寶雞網(wǎng)絡(luò )公司。歡迎您來(lái)電咨詢(xún)，咨詢(xún)熱線(xiàn)：0917-3535180 3536690……