css多列布局几种方式

在我们日常开发中布局是我们必不可少的步骤，今天介绍日常开发中常见的几种页面布局方式，如有错误，欢迎指正，少废话，直接上代码。

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
        }

就先介绍这四种方式布局了 现代开发不考虑老版本浏览器兼容更多喜欢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 收获多多，共同学习成长。