在我們日常開發(fā)中布局是我們必不可少的步驟，今天介紹日常開發(fā)中常見的幾種頁面布局方式，如有錯誤，歡迎指正，少廢話，直接上代碼。

1：左邊定寬右邊不定寬

1.png

html代碼

 <div class="parent">
          <div class="left">
           <p>左邊固定寬度100px</p>
          </div> 
          <div class="right">
             <p>右邊寬度不固定</p>
             <p>右邊寬度不固定</p>
             </div>
         </div>

css代碼一

  .left{
         width: 100px;
         float: left;
      }
      .left p{
         background:red;
       }
      .right{
        margin-left: 120px;
       }
      .right p{
         background: pink;
        }

css代碼二

   .left{
         width: 100px;
         float: left;
      }
      .left p{
         background:red;
        
       }
      .right{
         overflow: hidden;
       }
      .right p{
         background: pink;
        }

css代碼三

.parent{
         display: table;
         width: 100%;
         table-layout: fixed;
      }

      .left,.right{
          display: table-cell;
      }
      .left{width: 100px}
      .left p{
         background:red;
       }
      .right p{
         background: pink;
        }

css代碼四

.parent{
          display: flex;
      }
      .left{
            width: 100px; 
            margin-right: 20px;
            background:red;
        }
      .right {
          background: pink;
          flex: 1
        }

就先介紹這四種方式布局了 現(xiàn)代開發(fā)不考慮老版本瀏覽器兼容更多喜歡flex布局 ，尤其是移動端，如果pc端考慮到兼容問題 則前面的比較合適
還有兩列定寬右邊不定寬 道理一樣 在此代碼上加就OK了

2：左右等高布局

如圖：

6.png

html代碼

   <div class="parent">
       <div class="left">
           <p>我的高度跟隨右邊的高度</p>
       </div> 
       <div class="right">
            <p>右邊寬度不固定</p>
            <p>右邊寬度不固定</p>
            <p>右邊寬度不固定</p>
            <p>右邊寬度不固定</p>
            <p>右邊寬度不固定</p>
            <p>右邊寬度不固定</p>
            <p>右邊寬度不固定</p>
            <p>右邊寬度不固定</p>
       </div>
 </div>

css代碼一

    .parent{
         display: table;
         width: 100%;
         table-layout: fixed;
      }
      .left,.right{
           display: table-cell;
        }
      .left {
          width: 100px;
          background: red;
          margin-right: 60px;
        }
         
        .right{
            background: pink;
        }

css代碼二

 .parent{
         display: flex;
         }
  .left {
         width: 100px;
         background: red;
         margin-right: 20px;
        }
   .right{
            flex: 1;
            background: pink;
        }

3：等寬布局

如圖：

3.png

html代碼

<div class="parent_flex">
<div class="parent">
         <div class="column"><p>1</p></div>
         <div class="column"><p>2</p></div>
         <div class="column"><p>3</p></div>
         <div class="column"><p>4</p></div>
   </div>
 </div>

css代碼一

 .parent_flex{
           margin-left: -20px;
            }
  .parent{
           display: table;
           width: 100%;
           table-layout: fixed;
           background: #ccc;
           height: 200px;
         }
  .parent .column{
         display: table-cell;
         padding-left: 20px;
     } 
   .parent .column p{
              background: pink;
      }

css代碼二

    .parent{
           width: 80%;
           background: #ccc;
           height: 300px;
           display: flex;
           margin:0 auto;
     }
     .parent .column{
            height: 150px;
            background: pink;
            flex: 1;
     }
     .column+.column{
             margin-left: 20px;
     }

4：兩邊定寬中間不定寬

如圖：

8.png

html代碼：

<div class="parent">
               <div class="left"><p>左邊</p></div>
               <div class="right"><p>右邊</p></div>
               <div class="center"><p>中間</p></div>
 </div>

css代碼一

     .parent{
             width: 80%;
             background: #ccc;
             margin:0 auto;
       }
       .left{
          width: 100px;
          float: left;
          margin-right: 10px;
          background: red;
       }
       .right{ 
            width: 100px;
            float: right;
            margin-left: 10px;
            background: red;
       }
       .center{
           overflow: hidden;
           background: pink;
       }

上面的寫法就是需要交換div center 的代碼放到后面 浮動的方式 來布局
下面用table或flex 就不需要

html代碼二

<div class="parent">
                 <div class="left"><p>左邊</p></div>
             <div class="center"><p>中間</p></div>
                 <div class="right"><p>右邊</p></div>
 </div>

css代碼一

    .parent{
              width: 100%;
              background: #ccc;
              margin:0 auto;
              display: table;
              table-layout: fixed;
           }
       .left{
             width: 100px;
             padding-right: 10px;
            display: table-cell;
           }
       .right{
              width: 100px;
              padding-left: 10px;
              display: table-cell;
          }
        .center{
           display: table-cell;
           }
         p{
             background: pink;
           }

css代碼二

 .parent{
             width: 100%;
             background: #ccc;
              display: flex;
              height: 200px;
       }
       .left,.right{
             background: red;
             width: 100px;
       }
       .left{
              margin-right: 10px;
       }
       .right{
               margin-left: 10px;
       }
       .center{
           flex: 1;
           background: pink;
       }

看到這里，恭喜你2018年新的開始了，文章寫得比較簡單都是些基礎的知識，記得幫點個贊哦 ，如有問題可以留言 ！祝大家在新的一年2018 收獲多多，共同學習成長。