004-CSS-左右经典布局

左右经典布局

• 方案一：弹性盒子布局
• 方案二：绝对定位 + padding
• 方案三：绝对定位 + margin
• 方案四：行内块布局 + calc
• index.php/tags-41973.html" >���案五：浮动 + BFC

  方案一：弹性盒子布局

  Tips：左侧子盒子宽度固定，右侧子盒子 flex: 1

  （）

  .parent {  display: flex;  width: 500px;  height: 300px;  border: 1px solid #ccc;  box-sizing: border-box;  margin-bottom: 20px;}.left-son {  width: 100px;  height: 100%;  background: #4a90e2;}.right-son {  flex: 1;  height: 100%;  background: #dfffdf;}

  方案二：绝对定位 + padding

  Tips：父盒子相对定位，padding-left，左侧子盒子绝对定位

  .parent {  position: relative;  padding-left: 100px;  width: 500px;  height: 300px;  border: 1px solid #ccc;  box-sizing: border-box;  margin-bottom: 20px;}.left-son {  position: absolute;  left: 0;  width: 100px;  height: 100%;  background: #4a90e2;}.right-son {  height: 100%;  background: #dfffdf;}

  方案三：绝对定位 + margin

  Tips：父盒子相对定位，左侧子盒子绝对定位，右侧子盒子margin-left

  （）

  .parent {  position: relative;  width: 500px;  height: 300px;  border: 1px solid #ccc;  box-sizing: border-box;  margin-bottom: 20px;}.left-son {  position: absolute;  left: 0;  width: 100px;  height: 100%;  background: #4a90e2;}.right-son {  margin-left: 100px;  height: 100%;  background: #dfffdf;}

  方案四：行内块布局 + calc

  Tips：父盒子font-size: 0，子盒子行内块，左侧子盒子100px，右侧子盒子 calc(100% - 100px)

  .parent {  font-size: 0; /* 解决DOM换行引起的空白像素问题 */  width: 500px;  height: 300px;  border: 1px solid #ccc;  box-sizing: border-box;  margin-bottom: 20px;}.left-son {  display: inline-block;  vertical-align: top;  width: 100px;  height: 100%;  background: #4a90e2;}.right-son {  display: inline-block;  vertical-align: top;  width: calc(100% - 100px);  height: 100%;  background: #dfffdf;}

  方案五：浮动 + BFC

  Tips：左侧子盒子浮动，右侧盒子 overflow:hidden; 触发 BFC

  .parent {  width: 500px;  height: 300px;  border: 1px solid #ccc;  box-sizing: border-box;  margin-bottom: 20px;}.left-son {  float: left;  width: 100px;  height: 100%;  background: #4a90e2;}.right-son {  overflow: hidden;  height: 100%;  background: #dfffdf;}