两栏布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .clearfix::after{
  10.             content: "";
  11.             display: block;
  12.             clear: both;
  15.         }
  16.         .container{
  17.             background-color: lightblue;
  18.             width: 90%;
  19.             margin: 0 auto;
  20.         }
  21.         .aside{
  22.             float: left;
  23.             background-color: #008c8c;
  24.             color: #fff;
  25.             width: 300px;
  26.             margin-right: 20px;
  27.         }
  28.         .main{
  29.             overflow: hidden;
  30.             background-color: gray;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36.     <div class="container clearfix">
  37.         <aside class="aside">
  38.             Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim quos eos optio! Accusamus sit aut voluptatum consectetur dolor pariatur, dolorum beatae officia similique nobis magnam laboriosam, corrupti est, non ab doloribus asperiores aliquid. Aliquid dolor ipsa optio voluptates voluptate? Fugit quos praesentium vitae tempore numquam aperiam, culpa fugiat accusantium minima harum quasi sed, voluptate veritatis nobis nisi enim nesciunt id dicta vel. Nulla neque error illum a aliquid amet aut, non sapiente laborum vero provident maiores corrupti! Odit alias sapiente in impedit sit nisi ex aspernatur corrupti magni totam, rerum qui itaque repellat nesciunt veritatis consequatur sed eius enim quos.
  39.         </aside>
  40.         <div class="main">
  41.             Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus alias illo dolorem quod obcaecati est rem quis mollitia doloremque qui cum vitae amet, in deleniti blanditiis tempore impedit corporis sapiente tenetur recusandae at eos nostrum incidunt. Hic, autem, non dicta enim odit culpa nostrum quisquam in explicabo maxime nam minima? Qui dolor voluptatem suscipit omnis veritatis, consequatur illo voluptates ipsa modi aliquam quidem libero laborum nisi fugiat? Vero, error a accusantium tenetur ipsa et omnis obcaecati sed amet at illo voluptatibus, modi sunt id qui quae nesciunt excepturi animi! Laborum eaque, laboriosam quasi expedita perspiciatis ab exercitationem quae similique hic.
  42.         </div>
  43.     </div>
  44. </body>
  45. </html>

三栏布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .clearfix::after{
  10.             content: "";
  11.             display: block;
  12.             clear: both;
  15.         }
  16.         .container{
  17.             background-color: lightblue;
  18.             width: 90%;
  19.             margin: 0 auto;
  20.         }
  21.         .left{
  22.             float: left;
  23.             background-color: #008c8c;
  24.             color: #fff;
  25.             width: 300px;
  26.             margin-right: 20px;
  27.         }
  28.         .right{
  29.             float: right;
  30.             width: 300px;
  31.             margin-left: 20px;
  32.         }
  33.         .main{
  34.             overflow: hidden;
  35.             background-color: gray;
  37.         }
  38.     </style>
  39. </head>
  40. <body>
  41.     <div class="container clearfix">
  42.         <aside class="left">
  43.             Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim quos eos optio! Accusamus sit aut voluptatum consectetur dolor pariatur, dolorum beatae officia similique nobis magnam laboriosam, corrupti est, non ab doloribus asperiores aliquid. Aliquid dolor ipsa optio voluptates voluptate? Fugit quos praesentium vitae tempore numquam aperiam, culpa fugiat accusantium minima harum quasi sed, voluptate veritatis nobis nisi enim nesciunt id dicta vel. Nulla neque error illum a aliquid amet aut, non sapiente laborum vero provident maiores corrupti! Odit alias sapiente in impedit sit nisi ex aspernatur corrupti magni totam, rerum qui itaque repellat nesciunt veritatis consequatur sed eius enim quos.
  44.         </aside>
  45.         <aside class="right">
  46.             Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim quos eos optio! Accusamus sit aut voluptatum consectetur dolor pariatur, dolorum beatae officia similique nobis magnam laboriosam, corrupti est, non ab doloribus asperiores aliquid. Aliquid dolor ipsa optio voluptates voluptate? Fugit quos praesentium vitae tempore numquam aperiam, culpa fugiat accusantium minima harum quasi sed, voluptate veritatis nobis nisi enim nesciunt id dicta vel. Nulla neque error illum a aliquid amet aut, non sapiente laborum vero provident maiores corrupti! Odit alias sapiente in impedit sit nisi ex aspernatur corrupti magni totam, rerum qui itaque repellat nesciunt veritatis consequatur sed eius enim quos.
  47.         </aside>
  48.         <div class="main">
  49.             Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus alias illo dolorem quod obcaecati est rem quis mollitia doloremque qui cum vitae amet, in deleniti blanditiis tempore impedit corporis sapiente tenetur recusandae at eos nostrum incidunt. Hic, autem, non dicta enim odit culpa nostrum quisquam in explicabo maxime nam minima? Qui dolor voluptatem suscipit omnis veritatis, consequatur illo voluptates ipsa modi aliquam quidem libero laborum nisi fugiat? Vero, error a accusantium tenetur ipsa et omnis obcaecati sed amet at illo voluptatibus, modi sunt id qui quae nesciunt excepturi animi! Laborum eaque, laboriosam quasi expedita perspiciatis ab exercitationem quae similique hic.
  50.         </div>
  51.     </div>
  52. </body>
  53. </html>