CSS常见布局（一列，二列，三列）

最新推荐文章于 2024-04-22 20:01:30 发布

Wendy_Fighting

最新推荐文章于 2024-04-22 20:01:30 发布

阅读量581

点赞数

文章标签： CSS

本文链接：https://blog.csdn.net/Wendy_Fighting/article/details/99555014

版权

CSS布局

一，单列布局（头部，内容，底部）
（1）适应浏览器宽度的单列布局
效果：

代码：

<style>
    body{
        margin:0;/*或者 margin:auto*/
    }
    #demo1{
    margin: 0;
    text-align: center;
    color:#fff;
    }
    #demo1 .header{
        background-color: lightpink;
    }
    #demo1 .main{
        background-color: lightgray;
    }
    #demo1 .footer{
        background-color: lightblue;
    }
    </style>
</head>
<body>
    <div id="demo1">
    <div class="header">顶部</div>
    <div class="main">内容</div>
    <div class="footer">底部</div>
    </div>
</body>

但是说实话，感觉这种布局方式很少用的吧。毕竟浏览器大小不同。显示效果各异。我就曾见过此种布局方式制作的列表…em…蛮丑的…
（2）限定宽度
限定宽度的单列布局
这种是通过设定max-width实现的单列布局效果

<style>
    #demo2 .layout{
        max-width: 500px;
        margin:0 auto;
        text-align: center;
        color:#fff;
    }
    #demo2 .header{
        background-color: lightpink;
     
    }
    #demo2 .main{
        margin:10px auto;
        background-color: lightgray;
        height:100px;
        line-height: 100px;
    }
    #demo2 .footer{
        background-color: lightblue;
    }
</style>
<body>
 <div id="demo2">
            <div class="header layout">顶部</div>
            <div class="main layout">内容</div>
            <div class="footer layout">底部</div>
    </div>
</body>

(3)上下适应浏览器，中间限制宽度
效果图：
综合1,2的一种布局

<style>
#demo3{
    margin:0;
}
#demo3 .main{
    max-width:800px;
    margin:10px auto;
}
</style>
<body>
   <div id="demo3">
            <div class="header">顶部</div>
            <div class="main">内容</div>
            <div class="footer">底部</div>
    </div>
</body>

日常工作中我（2）（3）用的比较多的。一般都是在单个页面做列表的时候使用这种单列布局的方式。
二，两列布局
左边固定。右边自适应。实现的方式有：
效果图
float方法下的两列布局实现的方式有：
（1）Float
代码：

<style>

demo4::after{
    content: '';
    display: block;
    clear: both;
}
.left,.right{
    height: 100px;
    line-height: 100px;
    background-color: lightgray
}
.left{
    float:left;
    width:200px;
    background-color: lightpink;
}
.right{
    margin-left: 210px;
}
</style>
<body>
   <div id="demo4">
            <div class="left">左边</div>
            <div class="right">右边</div>
    </div>
 </body>

（2）FLEX(简单粗暴)

<style>
#demo5 {
    display:flex;
}
#demo5 .right{
    margin-left: 10px;
    flex-grow: 1;
}
</style>

三，三列布局,
效果图
（1）FLEX

<style>
#demo6 {
    display: flex;
    }
#demo6 .main{
    flex: 1; 
    margin:0 10px;
    background-color:lightblue; 
    } 
#demo6 .left,#demo6 .right{
    width:200px;
 }
 </style>
<body>
    <div id="demo6">
            <div class="left">左边</div>
            <div class="main">中间</div>
            <div class="right">右边</div>
    </div>
</body>

（2）FLOAT
此处要注意div的顺序 left,right,main
使用float：right的时候要注意。靠右浮动的元素要写在前面。不然就会产生换行的现象

<style>
#demo7{
    height: 100px;
}
#demo7::after{
    display: block;
    content: '';
    clear: both;
}
#demo7 .left{
width: 200px;
float: left;
}
#demo7 .main{
    margin: 0 210px;
}
#demo7 .right{
    width: 200px;
    float: right;
    background-color: lightblue;
}
</style>
<body>
    <div id="demo7">
            <div class="left">左边</div>
            <div class="right">右边</div>
            <div class="main">中间</div>     
    </div>
</body>

（3）Position定位

<style>
#demo8{
    position:relative;
    }
#demo8 .left{
    position: absolute;
    left:0;
    top:0;
}
#demo8 .right{
    position: absolute;
    right: 0;
    top:0;
}
#demo8 .main{
    margin:0 210px;
    background-color: lightblue;
}
</style>

综合以上的布局方式，最后~
效果图
综合图（1）

<style>
#demo{
    max-width: 800px;/*此处整体限制最大宽度为800px。如果只想content区域限制大小。则在content处设置max-width*/
    margin: 0 auto;
}
.content{
    display: flex;
    margin:10px auto;
}

#demo .header,#demo .footer{
    height: 50px;
    line-height: 50px;
    background-color: lightpink
}
.content .left,.content .right{
    width:200px;
    height: 150px;
    line-height: 150px;
    background-color: lightgray;
}
.content .main{
flex-grow: 1;
background-color: lightblue;
height: 150px;
line-height: 150px;
margin:0 10px;
}
</style>
<body>
 <div id="demo">
        <div class="header">顶部</div>
        <div class="content">
            <div class="left">左边</div>
            <div class="main">中间</div>
            <div class="right">右边</div>
        </div>
        <div class="footer">底部</div>
    </div>
</body>

Wendy_Fighting

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS常见布局（一列，二列，三列）

CSS布局一，单列布局（头部，内容，底部）（1）适应浏览器宽度的单列布局效果：代码：<style> body{ margin:0;/*或者 margin:auto*/ } #demo1{ margin: 0; text-align: center; color:#fff; } #demo1 .h...
复制链接

扫一扫