（记录）面试遇到的中间自适应，两端固定的三列布局

来源：互联网发布：工信部域名备案系统编辑：程序博客网时间：2024/06/05 10:43

1.第一种用position

2.第二种用浮动

3.第三种用的flex

*需要注意的是前两种均是将中间列放在最后

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin: 0;            padding: 0;        }        .left{            position: absolute;            height: 40px;            width: 200px;            left: 0;            background-color: #dddddd;        }        .right{            position: absolute;            height: 40px;            width: 200px;            right: 0;            background-color: #8b8878;        }        .center{            margin-left: 200px;            margin-right:200px;            background-color: red;            height:40px;        }        .two_left{            float:left;            height: 40px;            width: 200px;            background-color: #dddddd;        }        .two_right{            float: right;            height: 40px;            width: 200px;            background-color: #8b8878;        }        .two_center{            margin-left: 200px;            margin-right:200px;            background-color: red;            height: 40px;        }        .flex-box{            display: flex;        }        .three_left{            width:200px;            height:40px;            background-color: #dddddd;        }        .three_right{            background-color: #8b8878;            width:200px;            height:40px;        }        .three_center{            background-color: red;            flex:1;        }    </style></head><body><div class="left">1</div><div class="right">2</div><div class="center">3</div><br/><div class="two_left">1</div><div class="two_right">2</div><div class="two_center">3</div><br/><div class="flex-box">    <div class="three_left">1</div>    <div class="three_center">2</div>    <div class="three_right">3</div></div></body></html>

阅读全文

0 0