css完成多列固定不动与1列自融入的几种方式

日期:2020-10-14 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

本文详细介绍了css完成多列固定不动与1列自融入的几种方式,共享给大伙儿,实际以下:

1.flex合理布局

Flexible Box 实体模型,一般被称为 flexbox,是1种1维的合理布局实体模型。它给 flexbox 的子元素之间出示了强劲的室内空间遍布和对齐工作能力。大家说 flexbox 是1种1维的合理布局,是由于1个 flexbox 1次只能解决1个维度上的元素合理布局,1行或1列。这里大家运用flex合理布局来完成多列固定不动1列自融入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 

    #main{
         display: flex;/*设为伸缩器皿*/
         }

    #left{ 
        width:200px;/*左边固定不动宽度*/
        height:400px; 
        background:aqua;
    }
    #center{
         flex-grow:1; /*铺满剩下室内空间*/ 
         height:400px;  
         background:green;}
    #right{ 
        width:200px;/*固定不动右边宽度*/
        height:400px;  
        background:blue;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>
</html>

2.应用波动方式

对上下两一部分各自应用float:left和float:right,float使上下两个元素摆脱文本文档流,正中间元素一切正常在一切正常文本文档流中。对正中间文本文档流应用margin特定上下外边距开展精准定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
    *{margin: 0;padding: 0;}
    #main{
         width: 100%;height: 400px;
         }
    #left{ 
        width:200px;/*左边固定不动宽度*/
        height:400px;
        float: left; /*设定器皿左波动*/
        background:aqua;
    }
    #center{
         width: 100%;
         height:400px;
         margin: 0 200px;/*设定器皿上下外边距*/ 
         background:green;}
    #right{ 
        width:200px;/*固定不动右边宽度*/
        height:400px;  
        float: right;/*设定器皿右波动*/
        background:blue;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="left"></div>
        <div id="right"></div>
        <div id="center"></div>
    </div>
</body>
</html>

3.应用波动加calc涵数

对3一部分应用float:left,随后上下两侧固定不动宽度,正中间应用calc涵数测算宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
    *{margin: 0;padding: 0;}
    #main{
         width: 100%;height: 400px;
         }
    #left{ 
        width:200px;/*左边固定不动宽度*/
        height:400px;
        float: left; /*设定器皿左波动*/
        background:aqua;
    }
    #center{
         width: calc(100% - 400px);/*设定正中间宽度为父器皿宽度减去400px*/
         height:400px;
         float: left;/*设定器皿左波动*/ 
         background:green;}
    #right{ 
        width:200px;/*固定不动右边宽度*/
        height:400px;  
        float:left;/*设定器皿左波动*/
        background:blue;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>
</html>

4.应用肯定精准定位

用肯定精准定位把上下两一部分固定不动在两边,对正中间文本文档流应用margin特定上下外边距开展精准定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
    *{margin: 0;padding: 0;}
    #main{
         width: 100%;
         height: 400px;
         position: relative;/*父器皿应用相对性精准定位*/
         }
    #left{ 
        width:200px;/*左边固定不动宽度*/
        height:400px;
        position: absolute;/*左边应用固定不动精准定位*/
        left: 0;/*精准定位在器皿最左侧*/
        top: 0;
        background:aqua;
    }
    #center{
         width:100%;
         height:400px;
         margin: 0 200px;/*设定正中间器皿上下外边距*/
         background:green;}
    #right{ 
        width:200px;/*固定不动右边宽度*/
        height:400px;
        position: absolute;/*右边应用固定不动精准定位*/
        right: 0;/*精准定位在器皿最右侧*/
        top: 0;
        background:blue;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>
</html>

实际效果图以下:

到此这篇有关css完成多列固定不动与1列自融入的几种方式的文章内容就详细介绍到这了,更多有关css 多列固定不动 1列自融入內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!

上一篇:CSS injection 专业知识总结 返回下一篇:没有了