css左右布局
两个块级元素实行左右布局.
<body>
<div class="left">左</div>
<div class="right">右</div>
</body>
.left{
border: 1px solid red;
float: left;
width: 500px;
}
.right{
border: 1px solid black;
float: left;
width: 500px;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
111.png
左中右布局
<body>
<div class="clearfix">
<div class="left">左</div>
<div class="inside">中</div>
<div class="right">右</div>
</div>
</body>
.left{
border: 1px solid red;
float: left;
width: 500px;
}
.right{
border:1px solid black;
float: left;
width: 500px;
}
.inside{
border: 1px solid blue;
width: 500px;
float: left;
}
.clearfix:after{
content: "";
display: block;
clear: both;
22.png
水平居中
块级元素水平居中
<body>
<div class="div1">
<div class="div2">
居中
</div>
</div>
</body>
.div1{
border: 1px solid red;
width: 500px;
}
.div2{
border: 1px solid black;
width: 35px;
margin: 0px auto;
}
ww.png
内联元素居中
<body>
<div>
水平居中
</div>
</body>
div{
border: 1px solid black;
text-align: center;
width: 500px;
}
33.png
垂直居中
行内元素
<body>
<div>
<span>垂直居中</span>
</div>
</body>
div{
border: 1px solid red;
height: 200px;
width: 500px;
}
span{
line-height: 200px;
}
qq.png
块级元素
<body>
<div class="div1">
<div class="div2">
</div>
</div>
</body>
.div1{
border: 1px solid red;
height: 200px;
width: 500px;
position: relative;
}
.div2{
border: 1px solid black;
height: 100px;
width: 100px;
position: absolute;
top: 25%;
}
ee.png
