常見布局樣例

2018-07-07 17:33 更新

自動居中一列布局

所需知識：

  • 標準文檔流
  • 塊級元素
  • margin 外邊距屬性
<style type="text/css" media="screen">
  article {
    width: 800px;
    margin: 0 auto;
  }
</style>

<body>
  <article>
    <h1>Title</h1>
    <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>
  </article>
</body>

NOTE：設(shè)置 auto 會根據(jù)瀏覽器寬度自動設(shè)置外邊距尺寸。在設(shè)置浮動或絕對定位則會使自動居中失效，因為其會脫離文檔流。

(瀏覽器寬度 - 外包含層的寬度)/ 2 = 外邊距。

橫向兩列布局

此方法也同時可以實現(xiàn)橫向多列布局（原理與兩列布局相同）。

所需知識：

  • float 屬性，使縱向排列的塊級元素，橫向排列
  • margin 屬性，設(shè)置列之間的間距
<style type="text/css" media="screen">
  .clearfix:after {
     content: "."; /* Older browser do not support empty content */
     visibility: hidden;
     display: block;
     height: 0;
     clear: both;
  }
  .clearfix {zoom: 1;} /* 針對 IE 不支持 :after */
  body {
    width: 930px;
    margin: 0 auto; /* 橫向居中 */
  }
  article {
    width: 800px;
    float: left;
    margin-right: 10px;
  }
  aside {
    width: 120px;
    float: right;
  }
</style>
<body class="clearfix">
  <article>
    <h1>Title</h1>
    <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>
  </article>
  <aside>
    <h3>Aside Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, molestiae!</p>
  </aside>
</body>

絕對定位的橫向兩列布局

應用場合較少，常用與一列定寬，另一列自適應。

需要知識：

  • relative positon 父元素相對定位
  • absolute 自適應寬度元素絕對定位

注意：固定寬度列的高度需大于自適應的列（原因是絕對定位會脫離文檔流，不能撐開父元素）。

<style type="text/css" media="screen">
  body {
    position: relative;
    width: 100%;
  }

  article {
    position: absolute;
    top: 0;
    right: 0;
    width: 800px;
  }
  aside {
    position: absolute;
    top: 0;
    right:800px;
    left: 0;
  }
</style>

<body>
  <article>
    <h1>Title</h1>
    <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>
  </article>
  <aside>
    <h3>Aside Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, doloremque.</p>
  </aside>
</body>


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號