column分栏布局和等高布局和双飞翼布局和圣杯布局

最新推荐文章于 2022-07-17 17:29:48 发布

九阈

最新推荐文章于 2022-07-17 17:29:48 发布

阅读量168

点赞数

分类专栏： # CSS

本文链接：https://blog.csdn.net/weixin_46048542/article/details/119872294

版权

CSS 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

column分栏布局
column-count:分栏的个数
column-width:分栏的宽度
column-gap:分栏的间距
column-rule:分栏的边线
column-span:合并分栏
注意：column-width和column-count不要一起去设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{width: 600px;height: 400px;border: 1px black solid; margin: 30px auto;
         column-count: 4;
         column-gap: 20px;
         column-rule: 1px yellow dashed;}
         .box h2{column-span: all;text-align: center;}
    </style>
</head>
<body>
    <div class="box">
        <h2>李沁 </h2>
        <p>1990年9月27日出生于江苏省苏州市昆山市巴城镇，中国大陆女演员，毕业于上海戏剧学院附属戏曲学校。</p>
        <p>2008年，凭借出演《新版红楼梦》中少年“薛宝钗”被观众熟知。2010年，出演建党90周年献礼片《建党伟业》中的“杨开慧”一角，凭借该片入围第31届大众电影百花奖最佳新人奖。</p>
        <p>在电视剧《守望的天空》中担任女一号，饰演“葡萄”，2013年该剧荣获优秀中国电视剧“金天使奖”。2013年，又陆续出演都市情感电视剧《花开半夏》《璀璨人生》以及现代都市女性励志复仇剧《千金归来》。</p>
        <p>2016年11月11日，在浙江卫视双11狂欢夜晚会上，李沁与侯佩岑、黄子佼、华少、欧弟、沈凌、刘昊然等人一起成为了这场一年一度狂欢盛典的主持团成员。</p>
    </div>
</body>
</html>

在这里插入图片描述
等高布局利用margin-bottom和padding-bottom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        #parent{ border: 10px black solid; overflow: hidden;}
        #box1{float: left;width: 100px;background: red;margin-bottom: -2000px;padding-bottom: 2000px;}
        #box2{float: right;width: 100px;background: blue;margin-bottom: -2000px;padding-bottom: 2000px;}
    </style>
</head>
<body>
    <div id="parent">
        <div id="box1">
            <p>1111111111</p>
            <p>1111111111</p>
            <p>1111111111</p>
            <p>1111111111</p>
            <p>1111111111</p>
        </div>
        <div id="box2">
            <p>22222222</p>
            <p>22222222</p>
            <p>22222222</p>
            <p>22222222</p>
            <p>22222222</p>
        </div>
    </div>
</body>
</html>

在这里插入图片描述
双飞翼布局
利用浮动和margin负值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .header{height: 100px;background: red;}
        .container .center{height: 200px;float: left;width: 100%;}
        .container .center p{background: yellow;height: 100%;margin: 0 150px 0 100px;}
        .container .left{float: left;width: 100px;height: 200px;background: blue;margin-left: -100%;}
        .container .right{float: left;width: 150px;height: 200px;background: green;margin-left: -150px;}
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="container">
        <div class="center">
            <p>内容部分</p>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

在这里插入图片描述
圣杯布局利用浮动和margin负值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .clear::after{content: "";display: block;clear: both;}
        .header{height: 100px;background: red;}
        .container {background: yellow;margin: 0 150px 0 100px;}
        .container .center {height: 200px;float: left;width: 100%;}
        .container .left{float: left;width: 100px;height: 200px;background: blue;margin-left: -100%;position: relative;left: -100px;}
        .container .right{float: left;width: 150px;height: 200px;background: green;margin-left: -150px;position: relative;right: -150px;}
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="container clear">
        <div class="center">
            内容部分
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

在这里插入图片描述

九阈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
column分栏布局和等高布局和双飞翼布局和圣杯布局

column分栏布局column-count:分栏的个数column-width:分栏的宽度column-gap:分栏的间距column-rule:分栏的边线column-span:合并分栏注意：column-width和column-count不要一起去设置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-U
复制链接

扫一扫

专栏目录