三栏布局

chineseoa · 发表于 2013-2-8 00:56:41

简单三栏布局效果如下图：

实现代码如下：

<style type="text/css">
.border{border: 1px solid #ccc;}
div{margin:0 0 5px 0;}
#wrapper {width: 500; margin: auto;}
#header {width: auto; }
#twoColumn {width:100%;float: left; }
#nav{float: left; width: 150px; }
#content{width:auto;margin-left:157px;margin-right:177px;}
#promo{width:170px; float: left;margin-left:-172px;}
#footer{clear:both;}
</style>
<div id="wrapper">
<div id="header" class="border">
  <div id="header_inner">
   Header
  </div>
</div>
<div id="threeColumn">
  <div id="twoColumn">
   <div id="nav" class="border">
    <div id="nav_inner">
     <h3>Left Nav</h3>
     <ul>

     </ul>
    </div>
   </div>
   <div id="content" class="border">
    <div id="content_inner">Content</div>
   </div>
  </div>
  <div id="promo" class="border">
   <div id="promo_inner">
    <h3>Promo</h3>
    <p>11</p>
   </div>
  </div>
</div>
<div id="footer" class="border">
  <div id="footer_inner">
   Footer
  </div>
</div>
</div>

复杂三栏布局效果如下图：

实现代码如下：

<html>
<style type="text/css">
  * {font-size: 14px;}
  div.inner {border:1px solid #ccc; margin:5px;}
  div#wrapper{width:600px;}
  div#nav{float: left; width:200px;}
  div#twoColumn{margin: 10px 0px 10px 200px;}
  div#content{padding-right:200px;margin-bottom:5px;}
  div#login{width:200px;float: right;margin-top:-5px;margin-bottom:5px;}
  div#url{clear:both;margin-bottom:10px;}
</style>
<body>
<div id="wrapper">
  <div id="header">
   <div id="header_inner" class="inner">
    <h3>Header</h3>
    <ul>
     <li>Header 1</li>
     <li>Header 2</li>
    </ul>
   </div>
  </div>
  <div id="nav">
   <div id="nav_inner" class="inner">
    <h3>Nav</h3>
    <ul>
     <li>Nav 1</li>
     <li>Nav 2</li>
    </ul>
   </div>
  </div>
  <div id="twoColumn">
   <div id="login">
    <div id="login_inner" class="inner right_clear">
     <h3>Login</h3>
     <ul>
      <li>Login 1</li>
      <li>Login 2</li>
     </ul>
    </div>
   </div>
   <div id="content" class="right_clear">
    <div id="content_inner" class="inner right_clear">
     <h3>Content</h3>
     <ul>
      <li>Content 1</li>
      <li>Content 2</li>
     </ul>
    </div>
   </div>
   <div id="url">
    <div id="url_inner" class="inner">
     <h3>Url</h3>
     <ul>
      <li>Url 1</li>
      <li>Url 2</li>
     </ul>
    </div>
   </div>
   <div id="hot">
    <div id="hot_inner" class="inner">
     <h3>Hot</h3>
     <ul>
      <li>Hot 1</li>
      <li>Hot 2</li>
     </ul>
    </div>
   </div>
  </div>
  <div id="footer">
   <div id="footer_inner" class="inner">
    <h3>Footer</h3>
    <ul>
     <li>Footer 1</li>
     <li>Footer 2</li>
    </ul>
   </div>
  </div>
</div>
</body>
</html>

		自动登录	找回密码
密码			立即注册