经典布局（flex和传统两种实现）—左右两栏式

最新推荐文章于 2024-03-05 10:43:13 发布

jiaojsun

最新推荐文章于 2024-03-05 10:43:13 发布

阅读量1.2w

点赞数 2

分类专栏：经典布局（flex和传统两种实现）

本文链接：https://blog.csdn.net/jiaojsun/article/details/92831614

版权

经典布局（flex和传统两种实现）专栏收录该内容

5 篇文章 1 订阅

订阅专栏

1.混合浮动+普通流

混合浮动+普通流

父级：宽度固定

left: 宽度固定。浮动起来

right:宽度和父级一样，设置margin-right:left的宽度px，宽度随父级变化而变化

（固定+自适应）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
            margin:0 auto;
            width:80%;
        }
        #left{
            width:200px;
            height:500px;
            background: #ccffff;
            float: left;
        }
        #right{
            height: 500px;
            background: #ffcccc;
            margin-left:200px;
        }
    </style>
    <!--
        混合浮动+普通流
    -->
</head>
<body>

<div class="wrap">
    <aside id="left"></aside>
    <section id="right"></section>
</div>

</body>
</html>

效果

2. flex方式

父级：display: flex

left: flex: 0 0 200px(固定200px，不放大也不缩小)

right: flex: 1(会随父级变化)

（固定+自适应）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 参考阮一峰里面的百分比布局，要实现和上面一样的效果（一侧固定，一侧随父级进行变化） -->
    <!-- flex: 1 =? 1 1 0%
    flex: auto => 1 1 auto
    flex: none => 0 0 auto;
    flex-basis优先级 自身设定 > 0%(flex:1按字体的高度) > auto(采用height) -->
    <style>
      .wrap {
        margin: 0 auto;
        width: 80%;

        display: flex;
      }
      #left {
        flex: 0 0 200px; /* 左侧固定200px */
        height: 500px;
        background: red;
      }
      #right {
        /* 此处解释下
        flex: 1 1 0%
        0%表示此处宽度是按照自身内容宽度来，此处自身内容宽度为0，但是分配剩余的空间，所以可以自适应变化
         */
        flex: 1; /* 随父级变化 */
        height: 500px;
        background: burlywood;
      }
    </style>

</head>
<body>
<div class="wrap">
  <aside id="left"></aside>
  <section id="right">5555</section>
</div>

</body>
</html>

下来我们讨论一下其他的

上面flex的代码，当我们把他的主轴方向变了之后

会发现right的高度是由内容撑开的 (因为把字体去掉发现这块消失)

注意：

也就是说，当主轴方向是row的情况下，左边设置宽度，右边flex:1。右边宽度为总的宽度-左边宽度

当主轴方向为 column时，上面设置高度，宽度和父级一直，下边flex:1。下面设置高度无效，由内容决定.

3. 纯浮动

父级：定宽，清浮动（overflow:hidden）

left,right：定宽，定高，float:left

两边都固定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .wrap {
        margin: 0 auto;
        width: 900px;
        /* 清浮动 */
        overflow: hidden; 
      }
      #left {
        width: 200px;
        height: 500px;
        background: red;
        float: left;
      }
      #right {
        width: 700px;
        height: 500px;
        background: burlywood;
        float: left;
      }
    </style>
    <!--
        纯浮动
    -->
</head>
<body>
<div class="wrap">
  <aside id="left"></aside>
  <section id="right"></section>
</div>

</body>
</html>

4.定位法

父级：定宽，position：relative

left：定宽高： position: absolute top: 0 left: 0

right: 定宽高： position: absolute top: 0 right 0

两边都固定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .wrap {
        margin: 0 auto;
        width: 900px;
        position: relative;
      }
      #left {
        width: 200px;
        height: 500px;
        background: red;
        position: absolute;
        top: 0;
        left: 0;
      }
      #right {
        width: 700px;
        height: 500px;
        background: burlywood;
        position: absolute;
        top: 0;
        right: 0; 
      }
    </style>
    <!--
        定位
    -->
</head>
<body>
<div class="wrap">
  <aside id="left"></aside>
  <section id="right"></section>
</div>

</body>
</html>

jiaojsun

关注

2
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
经典布局（flex和传统两种实现）—左右两栏式

1.混合浮动+普通流混合浮动+普通流父级：宽度固定left: 宽度固定。浮动起来right:宽度和父级一样，设置margin-right:left的宽度px，宽度随父级变化而变化（固定+自适应）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g...
复制链接

扫一扫

专栏目录