CSS布局技巧有哪些，具体如何实现

发布时间：2023-09-14 08:52:10 所属栏目：语言来源：

导读：很多朋友都对“CSS布局技巧有哪些，具体怎样实现”的内容比较感兴趣，对此小编整理了相关的知识分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获，那么感兴趣的朋友就继续往下看吧！
需要实现横

很多朋友都对“CSS布局技巧有哪些，具体怎样实现”的内容比较感兴趣，对此小编整理了相关的知识分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获，那么感兴趣的朋友就继续往下看吧！
需要实现横向两列布局：左列固定，右列自适应的效果。

HTML代码：

XML/HTML Code 复制内容到剪贴板
DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>测试练习title>
head>
body>
div class="parent">
div class="side">侧栏div>
div class="main">主栏div>
div>
body>
html>

方法一（推荐）：使用asolute属性实现，需要注意：固定宽的列的高度>自适应宽度列的高度

CSS代码：

CSS Code 复制内容到剪贴板
body{
margin:0;
padding:0;
font-size:30px;
font-weight:bold;
}
.parent{
text-align:center;
line-height:200px;
}
.side{
position:absolute;left:0;top:0;
width:200px;
height:200px;
background:red;
}
.main{
margin-left:210px;
background:blue;
height:200px;
}
方法二：通过设置float属性（使纵向排列的块级元素，横向排列）及margin属性（设置两列之间的宽度）

CSS代码：

CSS Code 复制内容到剪贴板
body{
margin:0;
padding:0;
font-size:30px;
font-weight:bold;
}
.parent{
text-align:center;
line-height:200px;
}
.side{
width:200px;
height:200px;
float:left;
background:red;
}
.main{
height:200px;
margin-left:210px;
background:blue;
}
方法三：使用Flex布局

CSS代码：

CSS Code 复制内容到剪贴板
body{
margin:0;
padding:0;
font-size:30px;
font-weight:bold;
}
.parent{
text-align:center;
line-height:200px;
display:flex;
}
.side{
width:200px;
height:200px;
background:red;
margin-right:10px;
}
.main{
background:blue;
height:200px;
flex:1;
}
方法四：利用BFC不与浮动元素重叠的特性

CSS代码：

CSS Code 复制内容到剪贴板
body{
margin:0;
padding:0;
font-size:30px;
font-weight:bold;
}
.parent{
text-align:center;
line-height:200px;
}
.side {
width: 200px;
height: 100px;
float: left;
background: red;
margin-right: 10px;
}
.main {
/* 创建BFC */
overflow: hidden;
background: blue;
height: 100px;
}

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!