自适应布局/等分布局/九宫格布局是面试常考的内容，通常要求掌握几种实现方法，以下是我自己准备秋招总结的布局，方便记忆及应付面试基本足够~
左固右自适应布局
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>
网友评论