等分布局

Posted 2020-11-27 qjb2404

等分布局就是指一行被分为若干列，每一列的宽度是相同的值

实现方式一：

float属性实现等分布局

<div class="parent">
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
    <div class="col4"></div>
</div>

.col1,.col2,.col3,.col4{
   height:300px;
   width:25%;
   float:left;
}
.col1{
   background:red;
}
.col2{
   background:#ccc;
}
.col3{
   background:orange;
}
.col4{
   background:yellow;
}

实现方式二：display属性的值关于table实现

.parent{
   display:table;
   width:100%;
}
 
.col1,.col2,.col3,.col4{
   height:300px;
   display:table-cell;
   
}
.col1{
   background:red;
}
.col2{
   background:#ccc;
}
.col3{
   background:orange;
}
.col4{
   background:yellow;
}

等分布局实现空白间距的情况

方法一：

<div class="parent-fix">
   <div class="parent">
     <div class="col1"><div class="inner"></div></div>
    <div class="col2"><div class="inner"></div></div> 

    <div class="col3"><div class="inner"></div></div> 

    <div class="col4"><div class="inner"></div></div> 

   </div> 

</div>

.parent-fix{
   overflow:hidden;
}
.parent{
   height:300px;
   margin-left:-10px;
}
 
.col1,.col2,.col3,.col4{
   height:300px;
   width:25%;
   float:left;
   padding-left:10px;
   box-sizing:border-box;
}

.inner{
   height:300px;
}
.col1 .inner{
   background:red;
}
.col2 .inner{
   background:#ccc;
}
.col3 .inner{
   background:orange;
}
.col4 .inner{
   background:yellow;
}

方法二：

.parent-fix{
   overflow:hidden;
}
.parent{
   display:table;
   width:1434px; /*根据屏幕决定*/
   margin-left:-10px;
}
 
.col1,.col2,.col3,.col4{
   height:300px;
   display:table-cell;
   box-sizing:border-box;
   padding-left:10px;
}
.inner{
   height:300px;
}
.col1 .inner{
   background:red;
}
.col2 .inner{
   background:#ccc;
}
.col3 .inner{
   background:orange;
}
.col4 .inner{
   background:yellow;
}