CSS基础布局

最新推荐文章于 2024-05-20 22:08:52 发布

Elena_cc

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量329

点赞数 1

分类专栏： css揭秘文章标签： css 布局

本文链接：https://blog.csdn.net/Elena_cc/article/details/72854972

版权

css揭秘专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文实现CSS中的基础布局，左边定宽右边自适应，右边定宽左右边适应，左右定宽中间自适应，网页内容居中等。

1.左右定宽，中间自适应

实现思路：左边设为absolute，不占实际位置，中间的div就可以上去，再设margin-left ，就可以为左边腾出位置，右边也需要设置absolute,right和top.保证不影响之后的元素。

第一种：

方法：由于左边设为absolute,不占实际位置，所有中间可以顶上去，只需要设margin-left即可。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>左右定宽，中间自适应（第一种方法）</title>

    <style>
        .wrap div{
            height:400px;
        }
        .wrap{
            position: relative;
        }
        .left{
            background-color: darksalmon;
            width: 200px;
            position: absolute;
            left:0;
            top:0;
        }
        .center{
            background-color:#5bc0de ;
            margin-left: 200px;
            margin-right:200px;
        }
        .right{
            position: absolute;
            background-color: #b2dba1;
            width: 200px;
            right:0;
            top: 0;
        }
    </style>
</head>

<body>
<div class="wrap">

    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>

</div>
<a>edrgesrdtyyyyyyyyyyyyyyyuuuuuuuu</a>

</body>
</html>

第二种

方法：中间左浮动，宽度设为100%,需要注意父元素要设overflow:hidden

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>左右定宽，中间自适应(第二种方法)</title>

    <style>
        .wrap div{
            height:400px;
        }
        .wrap{
            position: relative;
            overflow: hidden;
        }
        .left{
            background-color: darksalmon;
            width: 200px;
            position: absolute;
            left:0;
        }
        .center{
            float:left;
            width:100%;
            background-color:#5bc0de;
            margin-left: 200px;
        }
        .right{
           /*相对于父元素*/
            position: absolute;
            background-color: #b2dba1;
            width: 400px;
            right:0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">


        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>

    </div>
    <a>edrgesrdtyyyyyyyyyyyyyyyuuuuuuuu</a>

</body>
</html>

2.左边定宽，右边自适应



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>右边自适应，左边定宽</title>
    <style>

        .right-auto{
            width:100%;
        }
        .right-auto div{
            height: 400px;
        }
        .left{
            float: left;
            background: aquamarine;
            width:200px;
        }
        .right{
            margin-left: 200px;
            background: coral;
        }

    </style>

</head>
<body>
<div class="wrap">

    <div class="right-auto">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</div>
<a>edrgesrdtyyyyyyyyyyyyyyyuuuuuuuu</a>
</body>
</html>

3.右边定宽，左边自适应

第一种：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>左边自适应，右边定宽</title>
    <style>

        .right-auto{
            /*width:100%;*/
            position: relative;
        }
        .right-auto div{
            height: 400px;
        }
        .left{
            float: right;
            width: 200px;
            background: aquamarine;

        }
        .right{
            margin-right: 200px;
            background: coral;
        }

    </style>

</head>
<body>
<div class="wrap">
    <div class="right-auto">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <a>edrgesrdtyyyyyyyyyyyyyyyuuuuuuuu</a>
</div>

</body>
</html>

第二种：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>左边自适应，右边定宽</title>
    <style>

        .left-auto{
            position: relative;
        }
        .left-auto div{
            height: 400px;
        }
        .left{
            margin-left: -300px;
            float: left;
            width: 100%;
            background: aquamarine;

        }
        #content{
            margin-left:300px;
        }
        .right{
            width: 300px;
            float: right;
            background: coral;
        }

    </style>

</head>
<body>
<div class="left-auto">
    <div class="left" >
        <div id="content">
            content自适应区，在前面
        </div>
    </div>
    <div class="right" >sidebar固定宽度区</div>
</div>
<a>asfsrhterthsdrthttttt</a>
</body>
</html>

5.网页内容居中

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>页面内容水平垂直居中</title>
    <style>
        .center-wrap{
            width:100%;
            border:1px solid black;
        }
        .content{
            background: darkcyan;
            width:60%;
            height:200px;
            margin:100px auto;
        }
    </style>
</head>

<body>

<div class="center-wrap">
    <div class="content"></div>
</div>

</body>
</html>

Elena_cc

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础布局

本文实现CSS中的基础布局，左边定宽右边自适应，右边定宽左右边适应，左右定宽中间自适应，网页内容居中等。1.左右定宽，中间自适应实现思路：左边设为absolute，不占实际位置，中间的div就可以上去，再设margin-left ，就可以为左边腾出位置，右边也需要设置absolute,right和top.保证不影响之后的元素。第一种：方法：由于左边设为absolute,不占实际位置，所有中间可以顶上
复制链接

扫一扫