布局（float和flex实现）"/>
双飞翼布局（float和flex实现）
双飞翼布局
要求
- 中间宽度自适应,两边宽度固定
- 中间栏在浏览器中优先展现渲染
float布局实现
<!DOCTYPE html>
<html lang="en"><head><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>Document</title>
</head>
<style>.parent {/*以下非必须 */overflow: hidden;color: #fff;margin-bottom: 10px;}.div-content {width: calc(100% - 400px); float: left;margin: 0 200px;/*以下非必须 */background-color: #999;}.div-left {width: 200px;margin-left: -100%;float: left;/*以下非必须 */background-color: orange;}.div-right {width: 200px;margin-left: -200px;float: left;/*以下非必须 */background-color: #999;}
</style><body><div class="parent"><div class="div-content"><ul><li>中间宽度自适应,两边宽度固定</li><li>中间栏在浏览器中优先展现渲染</li><li>这里的每一列都可以是最高列</li></ul></div><div class="div-left">我是左边</div><div class="div-right">我是右边</div></div>
</body></html>
flex布局实现（flex-shrink和order）
<!DOCTYPE html>
<html lang="en"><head><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>Document</title>
</head>
<style>.flex {display: flex;justify-content: center;align-items: flex-start;}.flex-content {background-color: #999;width: 100%;order: 1;}.flex-left {background-color: orange;width: 200px;order: 0;flex-shrink: 0;}.flex-right {background-color: skyblue;width: 200px;flex-shrink: 0;order: 2;}
</style><body><div class="parent flex"><div class="flex-content"><ul><li>中间宽度自适应,两边宽度固定</li><li>中间栏在浏览器中优先展现渲染</li><li>每一列都可以是最高列</li></ul></div><div class="flex-left">我是左边</div><div class="flex-right">我是右边</div></div>
</body></html>
结果：
PS：欢迎指正
更多推荐
双飞翼布局（float和flex实现）
发布评论