双飞翼布局的三种布局方式

最新推荐文章于 2023-05-17 17:19:37 发布

起个名难死

最新推荐文章于 2023-05-17 17:19:37 发布

阅读量229

点赞数

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/weixin_71104826/article/details/128488034

版权

flex双飞翼布局

<!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>
    .container {
        width: 100%;
        display:flex
    }

    .left{
        margin-right: -200px;
    }
    .right{
        margin-left: -200px;
    }



 </style> 
<body>
    <header style="width: 100%; height: 300px; background-color: aqua;"></header>
    
    <div class="container" >
        <div class="left" style="width: 200px; height: 200px;background-color:brown">left</div>
        <div class="center" style="width: 100%;">center</div>
        <div class="right" style="width: 200px; height: 200px;background-color:brown">right</div>
    </div>
    <footer style="width: 100%; height: 300px; background-color: aqua;"></footer>
    
</body>
</html>

这是flex双飞翼布局，我认为他的精髓就在于给了左右两个盒子负的外边距，这样浏览器宽度就是他的宽度，给左右两个盒子一个固定的位置。

calc双飞翼布局

<!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>
    .container {
        overflow: hidden;
        height: 100%;
    }
    .left {
        float: left;
    }

    .right {
        float: right;
    }
    .center {
        margin: auto;
        background: blue;
        width:calc(100%-400px);
    }
</style>

<body>
    <div class="container">
        <div class="left" style="width: 200px; height: 200px;background-color:brown">left</div>
        <div class="right" style="width: 200px; height: 200px;background-color:brown">right</div>
        <div class="center"  style=" height: 200px">center</div>
    </div>
   

</body>

</html>