css常见的各种布局上（两列布局）两列布局html5_css教程_前端技术

css常见的各种布局上（两列布局）两列布局html5

2023-03-08 学习力0

核心提示：　　常见的布局上（两列布局）　　　　1.常见的两列布局　　　　　　1.1左边固定，右边自适应，左边宽度已知，右边默认占满整行，使用left 左浮动，右边不浮动，设置margin-left:左侧宽度style.box{overflow: hidden;height: 500px;background-color: bisque;

　　常见的布局上（两列布局）

　　　　1.常见的两列布局

　　　　　　1.1左边固定，右边自适应，左边宽度已知，右边默认占满整行，使用left 左浮动，右边不浮动，设置margin-left:左侧宽度

<style>
        .box{
            overflow: hidden;
            height: 500px;
            background-color: bisque;
        }
        .box .box-left {
            margin-left: 10px;
            width: 200px;
            min-height: 100%;
            float: left;
            background-color: pink;
        }
        .box .box-right {
            margin-left: 220px;
            margin-right: 10px;
            height: 100%;
            background-color: green;
        }
        header,footer {
            height: 75px;
            background-color: aqua;
        }
    </style>
<div class="box"> 
        <div class="box-left">
            11
        </div>
        <div class="box-right">
            1shishsihsishsihi是不变的沙发电视柜很多水果和客户的感慨的沙发电视柜很多水果和客户的感慨大苏打撒郭德纲你只是  第三个大概了解斯大林经过拉丝几个垃圾
        </div> 
    </div>

　　　　　　1.2右侧固定，宽度已知，左侧自适应，记住固定的区域一定要放自适应区域的右边，

.box{
            height: 500px;
            background-color: bisque;
            position: relative;
        }
        .box .box-right {
            float: right;
            width: 200px;
            min-height: 100%;
            margin-right: 10px;
            background-color: pink;
        }
        .box .box-left {
            margin-left: 10px;
            margin-right: 220px;
            height: 100%;
            background-color: green;
        }
        header,footer {
            height: 75px;
            background-color: aqua;
        }
<div class="box"> 
        <div class="box-right">
            11
        </div>
        <div class="box-left">
            1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨大苏打撒郭德纲你只是  
　　　　　　　　第三个大概了解斯大林经过拉丝几个垃圾
        </div> 
    </div>

　　　　单列固定都是比较简单的还有嵌套一层div方式，还有弹性布局方式，还有grid布局，都能实现单侧固定

　　　　1.3 嵌套一层div ,左侧固定，右侧自适应布局，使用双浮动，右侧自适应先写入，左侧使用margin-left:-100%

　　　　　　不嵌套一层div，右侧直接使用margin-left:左侧宽度也是可以的(这个代码就不写了，和第一个差不多)

<style>
        .box{
            height: 500px;
            background-color: bisque;
            position: relative;
            overflow: hidden;
        }
        .box .box-right {
            float: left;
            margin-left: -100%;
            width: 200px;
            min-height: 100%;
            background-color: pink;
        }
        .box .box-left {
            float: left;
            width: 100%;
            height: 100%;
            background-color: green;
        }
        .box .box-left .son {
            margin-left: 210px;
        }
        header,footer {
            height: 75px;
            background-color: aqua;
        }
    </style>

<body>
    <header>

    </header>
    <div class="box"> 
        <div class="box-left">
            <div class="son">
                1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨大苏打撒郭德纲你只是 
　　　　　　　　　　 第三个大概了解斯大林经过拉丝几个垃圾
            </div>
        </div> 
        <div class="box-right">
            11
        </div>
    </div>
    <footer>

    </footer>
</body>

　　　　1.4 t弹性布局

<style>
        .box{
            height: 500px;
            background-color: bisque;
            position: relative;
            display: flex;
        }
        .box .box-left {
            margin-left: 10px;
            flex: 0 0 200px; /* 参数分别是 放大，缩小 初始大小 */
            background-color: pink;
        }
        .box .box-right {
            margin-left: 10px;
            margin-right: 10px;
            height: 100%;
            background-color: green;
        }
        header,footer {
            height: 75px;
            background-color: aqua;
        }
    </style>
<body>
    <header>

    </header>
    <div class="box"> 
        <div class="box-left">
            11
        </div>
        <div class="box-right">
            1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
　　　　　　　　大苏打撒郭德纲你只是  第三个大概了解斯大林经过拉丝几个垃圾
        </div> 
    </div>
    <footer>

    </footer>
</body>

　　　　1.5 grid布局,grid相对于flex的话属于二维布局，可以定义行数，定义列数，定义行高列高，宽度也可以自适应，设置父容器的display:grid。grid 有很大的兼容性问题。慎用

　　　　　　使用grid 相当于设置行数为1，列数为2的grid布局，使用grid可以很容易实现九宫格布局

<style>
        .box{
            height: 500px;
            background-color: bisque;
            position: relative;
            display: grid;
            padding: 0 10px;
            grid-template-rows: 1fr;
            grid-template-columns: 200px auto;
            grid-gap: 10px;
        }
        .box .box-left {
            background-color: pink;
        }
        .box .box-right {
            background-color: green;
        }
        header,footer {
            height: 75px;
            background-color: aqua;
        }
    </style>
<body>
    <header>

    </header>
    <div class="box"> 
        <div class="box-left">
            11
        </div>
        <div class="box-right">
            1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
　　　　　　　　大苏打撒郭德纲你只是  第三个大概了解斯大林经过拉丝几个垃圾
        </div> 
    </div>
    <footer>

    </footer>
</body>

　　　　使用grid实现9宫格布局

<style>
        .box{
            height: 500px;
            background-color: bisque;
            position: relative;
            display: grid;
            padding: 0 10px;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr;
            grid-gap: 10px;
        }
        .box .box-left {
            background-color: pink;
        }
        .box .box-right {
            background-color: green;
        }
        header,footer {
            height: 75px;
            background-color: aqua;
        }
    </style>
<body>
    <header>

    </header>
    <div class="box"> 
        <div class="box-left">
            11
        </div>
        <div class="box-right">
            1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
　　　　　　　　大苏打撒郭德纲你只是  第三个大概了解斯大林经过拉丝几个垃圾
        </div> 
        <div class="box-left">
            11
        </div>
        <div class="box-right">
            1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
　　　　　　　　大苏打撒郭德纲你只是  第三个大概了解斯大林经过拉丝几个垃圾
        </div> 
        <div class="box-left">
            11
        </div>
        <div class="box-right">
            1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
　　　　　　　　大苏打撒郭德纲你只是  第三个大概了解斯大林经过拉丝几个垃圾
        </div> 
        <div class="box-left">
            11
        </div>
        <div class="box-right">
            1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
　　　　　　　　大苏打撒郭德纲你只是  第三个大概了解斯大林经过拉丝几个垃圾
        </div> 
        <div class="box-left">
            11
        </div>
    </div>
    <footer>

    </footer>
</body>

View Code

免责声明：本文仅代表作者个人观点，与乐学笔记（本网）无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
本网站有部分内容均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责，若因作品内容、知识产权、版权和其他问题，请及时提供相关证明等材料并与我们留言联系，本网站将在规定时间内给予删除等相关处理.

css常见的各种布局上（两列布局） 两列布局html5

css常见的各种布局上（两列布局）两列布局html5