本文目录如下
两列布局 1、父级为flex容器，左子固定，右子flex:1 2、父级relative定位，左子absolute定位，右子设margin-left 3、左子浮动，右子溢出 4、左子右子浮动，右子width:cal(100% - 左子width)三列布局 1、排序左右中，position+left+right 2、排序左右中，float左右 3、排序左中右，父级flex容器，左右子分别absolute left right，中flex:1 4、排序左中右，父级table，左右子table-cell，中设margin左右双飞翼布局圣杯布局• 两列布局
• 1、父级为flex容器，左子固定，右子flex:1 .wrap{ display: flex; width: 100%; height: 500px; } .left{ width: 200px; background-color: blue; } .right{ flex:1; background-color: red; } <div class="wrap"> <div class="left">left</div> <div class="right">right</div> </div> • 2、父级relative定位，左子absolute定位，右子设margin-left（左右子要设置height） .wrap{ position: relative; width: 100%; } .left{ position: absolute; width: 200px; height: 500px; left: 0; top: 0; background-color: blue; } .right{ margin-left: 200px; height: 500px; background-color: red; } <div class="wrap"> <div class="left">left</div> <div class="right">right</div> </div> • 3、左子浮动，右子溢出（左右子要设置height） .wrap{ width: 100%; } .left{ float: left; width: 200px; height: 500px; background-color: blue; } .right{ overflow: hidden; height: 500px; background-color: red; } <div class="wrap"> <div class="left">left</div> <div class="right">right</div> </div> • 4、左子右子浮动，右子width:cal(100% - 左子width)【减号与左子width之间要空格，否则无效果】 .wrap{ width: 100%; } .left{ float: left; width: 200px; height: 500px; background-color: blue; } .right{ float: left; width: calc(100% - 200px); height: 500px; background-color: red; } <div class="wrap"> <div class="left">left</div> <div class="right">right</div> </div>• 三列布局
• 1、排序左右中，左右子position+left+right，中margin左右 .wrap{ position: relative; width: 100%; } .left{ height: 500px; width: 200px; position: absolute; left: 0; background-color: red; } .right{ height: 500px; width: 200px; position: absolute; right: 0; background-color: blue; } .center{ height: 500px; margin: 0 200px; background-color: yellow; } <div class="wrap"> <div class="left">left</div> <div class="right">right</div> <div class="center">center</div> </div> • 2、排序左右中，左右子float，中margin左右 .wrap{ width: 100%; } .left{ height: 500px; width: 200px; float: left; background-color: red; } .right{ height: 500px; width: 200px; float: right; background-color: blue; } .center{ height: 500px; margin: 0 200px; background-color: yellow; } <div class="wrap"> <div class="left">left</div> <div class="right">right</div> <div class="center">center</div> </div> • 3、排序左中右，父级flex容器，左右子分别absolute left right，中flex:1+margin .wrap{ display: flex; width: 100%; } .left{ height: 500px; width: 200px; position: absolute; left: 0; background-color: red; } .right{ height: 500px; width: 200px; position: absolute; right: 0; background-color: blue; } .center{ height: 500px; margin: 0 191px; /* 自己看控制台element来调整的,使内容去可见 */ flex:1; background-color: yellow; } <div class="wrap"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div> • 4、排序左中右，父级table，左右子table-cell，中不用设margin .wrap{ display: table; width: 100%; } .left{ height: 500px; width: 200px; display: table-cell; background-color: red; } .right{ height: 500px; width: 200px; display: table-cell; background-color: blue; } .center{ height: 500px; background-color: yellow; } <div class="wrap"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div>还差两个，明天补 • 双飞翼布局 • 圣杯布局
