双飞翼布局

什么是双飞翼布局：

左右宽度固定，中间宽度自适应，中间的内容优先加载。

案例：

<meta charset="UTF-8" />
  
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
<title>@说人话的前端 - bilibili</title>
  

* { margin: 0; padding: 0; } .item { float: left; color: #fff; font-size: 20px; } .container { width: 100%; background-color: #ccc; } .content { margin-left: 200px; margin-right: 150px; height: 200px; background-color: green; } .left-item { width: 200px; margin-left: -100%; background-color: red; } .right-item { width: 150px; margin-left: -150px; background-color: blue; }

<div class="container item">
    
  <div class="content">@说人话的前端-bilibili</div>
    
</div>

<div class="left-item item">left-item</div>
  
<div class="right-item item">right-item</div>
  

什么是圣杯布局

两边固定宽度，中间自适应宽度

难点

• margin-left:-100%; 100% 是父级宽度的100%
• margin-right:150px; 其他元素当他宽度少了150px

案例：

<meta charset="UTF-8" />
  
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
<title>@说人话的前端 - bilibili</title>
  

* { margin: 0; padding: 0; } .container { overflow: hidden; padding-left: 200px; padding-right: 150px; background-color: #ccc; } .item { float: left; color: #fff; font-size: 20px; } .content { width: 100%; height: 200px; background-color: green; } .left-item { width: 200px; margin-left: -100%; position: relative; right: 200px; background-color: red; } .right-item { width: 150px; margin-right: -150px; background-color: blue; }