• 注册
  • 关于作者
    企业认证:趣记站长
    关注 6 粉丝 4 喜欢 9 内容 992
    江西省·南昌市
    聊天 送礼
    • 查看作者
    • 探索CSS实现三行三列等高布局

      IE Bug--浮动对象外补丁的双倍距离

      HTML&CSS

      翻译自:In Search of the Holy Grail

      这个翻译的页面版权归greengnn所有,转载请注明出处  
      第一步:创建一个结构

      xhtml开始于header, footer, and container

       <div id="header"></div>

      <div id="container"></div>

      <div id="footer"></div>  
      CSS先定义container,给将要加入的sideleft,和sideright留下个位置

       #container {

       padding-left: 200px; /* LC width */

       padding-right: 150px; /* RC width */

      }  
      我们的布局现在看起来是这样的

      第二步:增加内容元素

      在第一步基础上增加内容元素  <div id="header"></div>

      <div id="container">

       <div id="center" class="column"></div>

       <div id="left" class="column"></div>

       <div id="right" class="column"></div>

      </div>

      <div id="footer"></div>  
      然后分别定义widths和float 让元素排列在一条线上,还有清除footer的浮动对齐

       #container .column {

       float: left;

      }

      #center {

       width: 100%;

      }

      #left {

       width: 200px; /* LC width */

      }

      #right {

       width: 150px; /* RC width */

      }

      #footer {

       clear: both;

      }  
      这里给center元素定义了100% width,让它占满montainer的可用空间,现在的布局变成了这样

      第三步:把left放到正确的位置

      要把left放到正确的位置,我们分两步

      1.让left和center在同一水平线  #left {

       width: 200px; /* LC width */

       margin-left: -100%;

      }  

      2.用相对定位,把left继续移动到正确的位置  #container .columns {

       float: left;

       position: relative;

      }

      #left {

       width: 200px; /* LC width */

       margin-left: -100%;

       right: 200px; /* LC width */

      }  
      让left距离他右边元素center 200px后,行了,left终于到自己位置上了

      IE Bug--浮动对象外补丁的双倍距离

      HTML&CSS

    • 0
    • 0
    • 0
    • 141
    • 单栏布局 侧栏位置: