DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS布局:居左之後居右是100%寬度顯示問題
CSS布局:居左之後居右是100%寬度顯示問題
編輯:CSS詳解     

下面這段代碼是個常見的問題,解決的辦法也有多個,最近發現一種放,放上來和大家討論一下:

  問題代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
<html XMLns="http://www.w3.org/1999/xHtml">
<head>
<title> new document </title>
<style type="text/CSS" media="screen">
<!--
#content { overflow: hidden; zoom: 1; }
#left { float: left; width: 200px; }
#right { background: #FFC8D0; }
-->
</style>
</head>
<body>
<div id="content">
    <div id="left">
    left - webjx.com
    </div>
    <div id="right">
    right - webjx.com
    </div>
</div>
</body>
</Html>

解決後CSS:

#content { overflow: hidden; zoom: 1; }
#left { float: left; width: 200px;   }
#right { background: #FFC8D0;overflow: hidden; zoom: 1;  }

查看運行效果:


 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved