CSS 布局
2018-04-11 本文已影响19人
加油吧_
问题：1. 左右布局 2. 左中右布局
写在最前：加border是为了看到container的宽高，方便做布局与居中,更清楚看到左右的布局
1.左右布局
Ⅰ. 使用float布局
html
<body>
<div class="container clearfix">
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
CSS
.left{
background-color: red;
float: left;
}
.right{
float: right;
background-color: blue;
}
1.gpj.png
一. 可以通过调整宽度高度来调整大小
二. 也可以调整宽度百分比
PS ：方方说，能不用宽高就不用。
Ⅱ. 使用 position
HTML
<div class="container">
<div class="left">左</div>
<div class="right">右</div>
</div>
CSS
*{
margin: 0;
padding: 0;
}
.left{
position: relative;
background-color: red;
width: 50px;
}
.right{ top: 0;
right:100px;
position: absolute;
background-color: blue;
}
2.png
左侧固定，右侧可调整
2. 左中右布局
Ⅰ. 使用float布局
HTML
<div class="container clearfix">
<div class="left">左</div>
<div class="mid">中</div>
<div class="right">右</div>
</div>
CSS
.container{
width: 300px;
border: 1px solid red;
height: 100px;
margin
}
.left {
width: 30%;
float: left;
background: red;
height:100%;
}
.mid{
width: 40%;
float: left;
background: green;
height:100%;
}
.right {
width: 30%;
float: right;
background: blue;
height:100%;
}
3.png
PS: 根据宽度百分比调整，使用float之后，元素顺次流动（float特点：在另一篇文章中会写出来 《CSS学习笔记》），可以同行排列，相当于display：block
也可以利用float做文字围绕图片效果。
Ⅱ. 使用position布局
HTML
<div class="container">
<div class="left">左</div>
<div class="mid">中</div>
<div class="right">右</div>
</div>
CSS
*{
margin: o;
border: 0;
}
.container{
max-width:300px;
margin: 0 auto; //这一步使整个三栏居中
position: relative;
border: 1px solid red;
}
.left {
width: 50px;
height: 100%;
background-color: red;
position: absolute;
left: 0;
}
.mid {
background-color: green;
margin: 0 50px;
position: relative;
}
.right {
top: 0;
width: 50px;
height: 100%;
background-color: blue;
position: absolute;
right:0;
}
4.png
1.父元素设置position:relative;
2.left和right设置position:absolute;并且设置左右侧栏的宽度值。
3.mid设置position:relative;
4.mid设置左右margin值，正好对应左右侧栏的宽度值
