常用布局

最新推荐文章于 2023-08-21 09:15:19 发布

lhh_12345

最新推荐文章于 2023-08-21 09:15:19 发布

阅读量296

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/lhh_12345/article/details/77659208

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、列表项两端对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表项两端对齐</title>
    <style>
    ul{
        margin: 0;
        padding: 0;
        list-style:none;
    }
    .box{
        width: 200px;
        height: 100px;
        background-color: lightgreen;
    }
    .list{
        overflow: hidden;
        margin-right: -10px;
    }    
    .in{
        float: left;
        width: 60px;
        height: 100px;
        margin-right: 10px;
        background-color: pink;
    }
    </style>
</head>
<body>
    <div class="box">
        <ul class="list">
            <li class="in">1</li>
            <li class="in">2</li>
            <li class="in">3</li>
        </ul>    
    </div>
</body>
</html>

2、三栏自适应布局（双飞翼布局）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局</title>
    <style>
    html, body{
        height: 100%;
    }
    .main{
        float: left;
        width: 100%;
        height: 100%;
    }
    .in{
        margin: 0 210px;
        background-color: green;
        height: 100%;
    }


    .left{
        float:left;
        width: 200px;
        height: 100px;
        margin-left: -100%;
        background-color: red;
    }
    .right{
        float: left;
        width: 200px;
        height: 100px;
        margin-left: -200px;
        background-color: blue;
    } 
    </style>
</head>
<body>
    <div class="main">
        <div class="in"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

3、左侧自适应，右侧固定：

方法一、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏布局</title>
    <style>
    html, body{
        width:100%;
        height: 100%;
    }
    .main{
        width: 100%;
        float: left;
    }
    .left{
        height: 600px;
        margin-right: 210px;
        background: red;
    }
    .right{
        float: left;
        margin-left: -200px;
        background: blue;
        width: 200px;
        height: 600px;
    }

    </style>

</head>
<body>
    <div class="main">
        <div class="left"></div>
    </div>
    <div class="right"></div>
</body>
</html>

方法二（弹性盒模型）、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏布局</title>
    <style>
    body{
        display: flex;
        flex-flow: row;
    }
    .left{
        flex: 1;
        background: blue;
        height: 600px;
    }
    .right{
        background: red;
        width: 200px;
        height: 600px;
    }

    </style>

</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

3、三栏等高布局（最终高度为依据高度最高的元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏等高</title>
    <style>
ul{
    padding: 0;
    margin: 0;
}
.list{
    list-style: none;
    overflow: hidden;
}
.main{
    margin: 0 210px;
    height: 30px;
    background-color: green;
}
.left{
    width: 200px;
    height: 50px;
    float: left;
    background-color: red;
}
.right{
    width: 200px;
    height: 100px;
    float: right;
    background-color: blue;
}
.main,.left,.right{
    margin-bottom: -9999px;
    padding-bottom: 9999px;
}
    </style>
</head>
<body>
<ul class="list">
    <li class="left"></li>
    <li class="right"></li>
    <li class="main"></li>    
</ul>
</body>
</html>

lhh_12345

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常用布局

1、列表项两端对齐列表项两端对齐 ul{ margin: 0; padding: 0; list-style:none; } .box{ width: 200px; height: 100px; background-color: light
复制链接

扫一扫

专栏目录