常见布局样例

自动居中一列布局

所需知识：

  • 标准文档流
  • 块级元素
  • margin 外边距属性
  1. <style type="text/css" media="screen">
  2.   article {
  3.     width: 800px;
  4.     margin: 0 auto;
  5.   }
  6. </style>
  8. <body>
  9.   <article>
  10.     <h1>Title</h1>
  11.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A natus repellendus, modi culpa, dolor ducimus debitis, facere dolorum cum aspernatur, soluta molestias est illo vel iusto esse ex ullam amet!</p>
  12.   </article>
  13. </body>

NOTE：设置 auto 会根据浏览器宽度自动设置外边距尺寸。在设置浮动或绝对定位则会使自动居中失效，因为其会脱离文档流。

(浏览器宽度 - 外包含层的宽度)/ 2 = 外边距。

横向两列布局

此方法也同时可以实现横向多列布局（原理与两列布局相同）。

所需知识：

  • float 属性，使纵向排列的块级元素，横向排列
  • margin 属性，设置列之间的间距
  1. <style type="text/css" media="screen">
  2.   .clearfix:after {
  3.      content: "."; /* Older browser do not support empty content */
  4.      visibility: hidden;
  5.      display: block;
  6.      height: 0;
  7.      clear: both;
  8.   }
  9.   .clearfix {zoom: 1;} /* 针对 IE 不支持 :after */
  10.   body {
  11.     width: 930px;
  12.     margin: 0 auto; /* 横向居中 */
  13.   }
  14.   article {
  15.     width: 800px;
  16.     float: left;
  17.     margin-right: 10px;
  18.   }
  19.   aside {
  20.     width: 120px;
  21.     float: right;
  22.   }
  23. </style>
  24. <body class="clearfix">
  25.   <article>
  26.     <h1>Title</h1>
  27.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, quam, fugit. Accusamus voluptates nesciunt in, autem ipsa assumenda a iusto, reiciendis earum repudiandae, nulla natus blanditiis, aliquam asperiores commodi qui.</p>
  28.   </article>
  29.   <aside>
  30.     <h3>Aside Title</h3>
  31.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, molestiae!</p>
  32.   </aside>
  33. </body>

绝对定位的横向两列布局

应用场合较少，常用与一列定宽，另一列自适应。

需要知识：

  • relative positon 父元素相对定位
  • absolute 自适应宽度元素绝对定位

注意：固定宽度列的高度需大于自适应的列（原因是绝对定位会脱离文档流，不能撑开父元素）。

  1. <style type="text/css" media="screen">
  2.   body {
  3.     position: relative;
  4.     width: 100%;
  5.   }
  7.   article {
  8.     position: absolute;
  9.     top: 0;
  10.     right: 0;
  11.     width: 800px;
  12.   }
  13.   aside {
  14.     position: absolute;
  15.     top: 0;
  16.     right:800px;
  17.     left: 0;
  18.   }
  19. </style>
  21. <body>
  22.   <article>
  23.     <h1>Title</h1>
  24.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error obcaecati sint minima totam fuga, tempora, id quia soluta officia iure eligendi sequi non dicta, doloribus accusamus odit fugiat quam quibusdam.</p>
  25.   </article>
  26.   <aside>
  27.     <h3>Aside Title</h3>
  28.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, doloremque.</p>
  29.   </aside>
  30. </body>