css布局学习实操（Float、Position或者Flexbox来实现）

最新推荐文章于 2021-09-15 09:01:21 发布

小章鱼爱吃丸子

最新推荐文章于 2021-09-15 09:01:21 发布

阅读量226

点赞数

分类专栏：百度前端技术学院

本文链接：https://blog.csdn.net/qq_39644109/article/details/94875105

版权

百度前端技术学院专栏收录该内容

19 篇文章 0 订阅

订阅专栏

实现一个两栏布局，左侧占30%宽度，右侧占70%宽度

HTML代码：

<selection>
      <article class="left">
         <p>132</p>
      </article>
      <article class="right">
          <p>456</p>
      </article>
  </selection>

CSS代码：

.left{
        /* float: left; */
        /* position: absolute;
        top:0;
        left: 0;
        margin: 0; */
        width: 30%;
        background-color: aqua;
        height: 200px;
    }
    .right{
        /* float: right; */
        /* position: absolute;
        top: 0;
        left: 30%; */
        width: 70%;
        background-color: blueviolet;
        height: 200px;
    }
    selection{
        display: flex;
    }

实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化

        .left {
            width: 300px;
            height: 100%;
            background-color: lightcoral;
            /* float: left; */
            /* position: absolute; */
        }

        .right {
            height: 100%;
            /* position: relative;
            top: 0;
            left: 300px; */
            flex:1;
            background-color: khaki;
        }
        selection{
            display: flex;
        }

实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化

要在HTML中将right写在前面

<body>
    <selection>
        <article class="right">
            <p>456</p>
        </article>
        <article class="left">
            <p>132</p>
        </article>
    </selection>
</body>

CSS装饰为：

        .left {
            height: 100%;
            /* margin-right: 450px; */
            /* overflow: hidden; */
            flex: 1;
            background-color: lightcoral;
        }
        .right {
            /* float: right; */
            /* position: absolute;
            top: 0;
            right: 0; */
            width: 450px;
            height: 100%;
            background-color: khaki;
        }
        selection{
            display: flex;
        }

实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变化

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

div的顺序是HTML代码中div的顺序决定的。

犯过几次这个错误，终于找到了一个好的博文，记录一下。

<body>
    <selection>
        <article class="left">
            <p>132</p>
        </article>
        <article class="right">
                <p>456</p>
            </article>
        <article class="center">
            <p>888</p>
        </article>
    </selection>
</body>

注意在写flex方法时要将center和right换位置

        .left {
            width: 200px;
            height: 100%;
            /* float: left; */
            /* position: absolute;
            top: 0;
            left: 0; */
            background-color: lightcoral;
        }
        .center{
            /* margin-left: 200px;
            margin-right: 200px; */
            height: 100%;
            background-color: cadetblue;
            flex: 1;
        }
        .right {
            width: 200px;
            height: 100%;
            /* float: right; */
            /* position: absolute;
            top: 0;
            right: 0; */
            background-color: khaki;
        }

        selection{
        display: flex;
        }

实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化

直接放CSS代码，HTML代码和前面的几乎一样

   .left {
            width: 200px;
            height: 100%;
            /* float: left; */
            /* position: absolute;
            top: 0;
            left: 0; */
            background-color: lightcoral;
        }
        .center{
            height: 100%;
            background-color: cadetblue;
            width: 200px;
            /* float: left; */
            /* position: absolute;
            top: 0;
            left: 200px; */
        }
        .right {
            /* margin-left: 400px; */
            height: 100%;
            background-color: khaki;
            flex: 1;
        }
        selection{
            display: flex;
        }

小章鱼爱吃丸子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css布局学习实操（Float、Position或者Flexbox来实现）

实现一个两栏布局，左侧占30%宽度，右侧占70%宽度HTML代码：<selection> <article class="left"> <p>132</p> </article> <article class="right"> <p&gt...
复制链接

扫一扫

专栏目录