css关于实现双飞翼布局的多种方法

最新推荐文章于 2024-08-21 10:36:09 发布

dyx19971026

最新推荐文章于 2024-08-21 10:36:09 发布

阅读量648

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/dyx19971026/article/details/103654161

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一种方法（浮动之后采用margin负边距）

首先给大家讲解一下思路，然后大家可以按照下边给出的代码试着运行一下
在这里插入图片描述
上边中间那块就是双飞翼布局，左右两边固定，中间自适应，在布局的时候需要注意一点。要先将middle这一块内容先书写，在它渲染完之后在书写left和right。
这样出来的结果就是left和right都跑到了middle的下边，接下来就是最重要的了，我们要想让这两块乖乖的跑到他们该去的地方，需要使用margin-left，让left左外边距向左偏移整行的宽度（100%）；让right的左外边距向左偏移right自身的宽度。这样效果就可以实现了

<body>
    <section class="top"></section>
    <section class="content clearfix">
        <div class="middle">hello world</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </section>
    <section class="bottom"></section>
</body>
  <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clearfix::after {
            content: "";
            height: 0;
            line-height: 0;
            display: block;
            clear: both;
            visibility: hidden;
        }

        .top {
            height: 100px;
            background-color: #0af;
        }

        .content {
            height: 300px;
            background-color: #cfa;
        }

        .middle {
            width: 100%;
            float: left;
            height: 100%;
            background-color: pink;
            padding: 0px 200px;
            box-sizing: border-box;
        }

        .left {
            float: left;
            margin-left: -100%;
            width: 200px;
            height: 100%;
            background-color: orange;
        }

        .right {
            float: left;
            margin-left: -200px;
            width: 200px;
            height: 100%;
            background-color: orange;
        }

        .bottom {
            height: 100px;
            background-color: gray;
        }
    </style>

第二种方法（flex布局）

将包含他们三个的父容器设置为display:flex，对于他们三个设置他们各自的缩放或者放大比例，以及占据的固定宽度（flex-basis）
flex属性是flex-grow, flex-shrink 和 flex-basis的简写.
注意：用felx布局就无须为中间的middle设置padding。三个块的书写顺序也改为left 、middle、right

<body>
    <section class="top"></section>
    <section class="content clearfix">
        <div class="left">left</div>
        <div class="middle">hello world</div>
        <div class="right">right</div>
    </section>
    <section class="bottom"></section>
</body>

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clearfix::after {
            content: "";
            height: 0;
            line-height: 0;
            display: block;
            clear: both;
            visibility: hidden;
        }

        .top {
            height: 100px;
            background-color: #0af;
        }

        .content {
            height: 300px;
            background-color: #cfa;
            display: flex;
        }

        .middle {
            flex-grow: 1;
            width: 100%;
            height: 100%;
            background-color: pink;
            box-sizing: border-box;
        }

        .left {
            flex: 0 0 200px;
            width: 200px;
            height: 100%;
            background-color: orange;
        }

        .right {
            flex: 0 0 200px;
            width: 200px;
            height: 100%;
            background-color: orange;
        }

        .bottom {
            height: 100px;
            background-color: gray;
        }
    </style>

第三种方法（绝对定位）

这种方法相信大家都很容易理解，直接上代码

<body>
    <section class="top"></section>
    <section class="content clearfix">
        <div class="left">left</div>
        <div class="middle">hello world</div>
        <div class="right">right</div>
    </section>
    <section class="bottom"></section>
</body>

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .clearfix::after {
            content: "";
            height: 0;
            line-height: 0;
            display: block;
            clear: both;
            visibility: hidden;
        }

        .top {
            height: 100px;
            background-color: #0af;
        }

        .content {

            height: 300px;
            background-color: #cfa;
            position: relative;
        }

        .middle {
            padding: 0 200px;
            width: 100%;
            height: 100%;
            background-color: pink;
            box-sizing: border-box;
        }

        .left {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 100%;
            background-color: orange;
        }

        .right {
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 100%;
            background-color: orange;
        }

        .bottom {
            height: 100px;
            background-color: gray;
        }
    </style>

第四种方法（display-table）

* {
            margin: 0;
            padding: 0;
        }

        .clearfix::after {
            content: "";
            height: 0;
            line-height: 0;
            display: block;
            clear: both;
            visibility: hidden;
        }

        .top {
            height: 100px;
            background-color: #0af;
        }

        .content {
            display: table;
            height: 300px;
            background-color: #cfa;

        }

        .leftout,
        .middleout,
        .rightout {
            display: table-cell;
        }

        .middleout {
            width: 100%;
        }
        .middle {
            background-color: pink;
            height: 100%;
        }
        .left {
            width: 200px;
            height: 100%;
            background-color: orange;
        }

        .right {
            width: 200px;
            height: 100%;
            background-color: orange;
        }

        .bottom {
            height: 100px;
            background-color: gray;
        }

  <section class="top"></section>
    <section class="content clearfix">
        <div class="leftout">
            <div class="left">left</div>
        </div>
        <div class="middleout">
            <div class="middle">hello world</div>
        </div>
        <div class="rightout">
            <div class="right">right</div>
        </div>
    </section>
    <section class="bottom"></section>