常见自适应布局/等分布局/九宫格布局

自适应布局/等分布局/九宫格布局是面试常考的内容，通常要求掌握几种实现方法，以下是我自己准备秋招总结的布局，方便记忆及应付面试基本足够~

左固右自适应布局
1 左边div定宽+左浮动，右边div用margin-left等于左边div宽度实现

.left{
  width:100px;
  float:left;
  border:1px solid red;
  min-height:500px;
}
.right{
   margin-left:100px;
   border:1px solid blue;
   min-height:500px;
}

 <div>
      <div class=’left’></div>
      <div class=’right’></div>（顺序不能换）
  </div>

2 左边div定宽+绝对定位，右边div用margin-left等于左边div宽度实现

.left{
  position: absolute;
  left: 0;
  top: 0;
  width:100px;
  border:1px solid red;
  min-height:200px;
}
.right{
  margin-left: 100px;
  border:1px solid blue;
  min-height:200px;
}

<div>
      <div class=’left’></div>
       <div class=’right’></div> （顺序可互换）
 </div>

3 弹性布局,IE10以下不兼容

body{
    display: flex
 }
.left{
    flex:0 0 100px;
    border:1px solid red;
    min-height:500px;

}
.right{
    flex: 1;
    border:1px solid blue;
    min-height:500px;
}

<body>
  <div>
       <div class=’left’></div>
       <div class=’right’></div> （顺序不能换）
   </div>
</body>

右固左自适应布局
1 右边div定宽+右浮动，左边margin-right等于右边div宽度

.right{
  width:100px;
  float:right;
  border:1px solid red;
  min-height:500px;
}
.left{
  margin-right:100px;
  border:1px solid blue;
  min-height:500px;
}

<div>
    <div class=’right’></div>
     <div class=’left’></div>（顺序不能换）
</div>

2 右边div定宽+绝对定位，左边margin-right等于右边div宽度

right{
  width:100px;
  position：absolute；
  top:0;
  right：0；
  border:1px solid red;
  min-height:500px;
}
.left{
  margin-right:100px;
  border:1px solid blue;
  min-height:500px;
}

<div>
  <div class=’left’></div>
   <div class=’right’></div>（顺序可互换）
</div>

3 弹性布局

body{
  display: flex
}
.left{
  flex: 1;
  width: 100px;
  border:1px solid red;
  min-height:500px;
}
.right{
  flex:0 0 100px;
  border:1px solid blue;
  min-height:500px;
}

<body>
   <div>
      <div class="left"></div>
      <div class="right">1233333</div>（顺序不要换）
  </div>
</body>

左固右固中间自适应布局
1 左边div定宽+左浮动，右边div定宽+右浮动，中间div左边距等于左边div宽度，右边距为右边div宽度、

.left{
  float: left;
  width:100px;
  border:1px solid blue;
  min-height:500px;
}
.middle{
  border:1px solid blue;
  min-height:500px;
  margin:0 100px 0 100px;
}
.right{
  width:100px;
  float: right;
  border:1px solid red;
  min-height:500px;
}
<div>
  <div class='left'>
  </div>
  <div class='right'>
  </div>
  <div class='middle'>
   </div>   （浮动元素放在前面）
</div>

2 左边div绝对定位+左浮动，右边div绝对定位+右浮动，中间div左边距等于左边div宽度，右边距为右边div宽度

.left{
  position:absolute;
  width:100px;
  left:0px;top:0px;
  border:1px solid blue;
  min-height:500px;
}
.middle{
  border:1px solid blue;
  min-height:500px;
  margin:0 100px 0 100px;
}
.right{
  width:100px;
  position:absolute;
  right:0px;
  top:0px;
  border:1px solid red;
  min-height:500px;
}
<div>
  <div class='left'>
  </div>
  <div class='middle'>
  </div>
  <div class='right'>
  </div> （顺序可调）
</div>

3 弹性布局

body{
  display: flex;
}
.left{
  flex: 0 0 100px;
  border:1px solid blue;
  min-height:500px;
}
.middle{
  flex: 1;
  border:1px solid blue;
  min-height:500px;
}
.right{
  flex: 0 0 100px;
  float: right;
  border:1px solid red;
  min-height:500px;
}
<div>
  <div class='left'>
  </div>
  <div class='middle'>
  </div>
  <div class='right'>
  </div>（顺序不能换）
</div>

等分布局
1 width+box-sizing+float

.left{
  float: left;
  width: 33.3%;
  box-sizing: border-box;
  border:1px solid blue;
  min-height:500px;
}
.middle{
  float: left;
  width: 33.3%;
  box-sizing: border-box;
  border:1px solid blue;
  min-height:500px;
}
.right{
  float: left;
  width: 33.3%;
  box-sizing: border-box;
  border:1px solid red;
  min-height:500px;
}
<div>
  <div class='left'>
  </div>
  <div class='middle'>
  </div>
  <div class='right'>
  </div>
</div>

2 弹性布局

body{
  display: flex;
}
.left{
  flex: 1;
  border:1px solid blue;
  min-height:500px;
}
.middle{
  flex: 1;
  border:1px solid blue;
  min-height:500px;
}
.right{
  flex: 1;
  float: right;
  border:1px solid red;
  min-height:500px;
}
<body>
  <div class='left'>
  </div>
  <div class='middle'>
  </div>
  <div class='right'>
  </div>
</body>

九宫格
1 同等分布局方法1，float-left+box-sizing+width:33.3%
2 同等分布局方法2，每一行都为一个等分布局

.lottery-draw-container{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 300px;
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
}
.item{
  flex: 1;
  display: flex;
  justify-content:center;
  align-items: center;
  border: 1px solid #000;
}
.active{
  background-color: red;
}

<div class="lottery-draw-container">
  <div style="display: flex;flex:1;">
    <div class="item active"><span>一等奖</span></div>
    <div class="item"><span>二等奖</span></div>
    <div class="item"><span>三等奖</span></div>
  </div>
  <div style="display: flex;flex:1;">
    <div class="item"><span>四等奖</span></div>
    <span class="item"><span>开始</span></span>
    <div class="item"><span>五等奖</span></div>
  </div>
  <div style="display: flex;flex:1;">
    <div class="item"><span>六等奖</span></div>
    <div class="item"><span>七等奖</span></div>
    <div class="item"><span>八等奖</span></div>
  </div>
</div>

常见自适应布局/等分布局/九宫格布局

推荐阅读更多精彩内容