三栏布局和水平垂直居中demol例子
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动和布局</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="contain">
<ul class="menu">
<li><a href="">首页</a></li>
<li>
<a href="">博客</a>
<ul class="drop-menu">
<li><a href="">CSS3</a></li>
<li><a href="">SASS</a></li>
<li><a href="">JavaScript</a></li>
<li><a href="">jQuery</a></li>
</ul>
</li>
<li><a href="">案例</a></li>
<li><a href="">资源</a></li>
<li><a href="">前端收藏夹</a></li>
</ul>
<!-- 左右栏固定，中间栏自适应，且中间栏先渲染 -->
<div class="wrap">
<div class="main">
<div class="child">
<div class="center-content"></div>
</div>
</div>
<div class="left">
<div id="demo">
<p>水平垂直居中</p>
</div>
</div>
<div class="right">
<div class="father">
<div class="child"></div>
</div>
</div>
</div>
<!-- 左右栏固定，中间栏自适应，且中间栏先渲染 1-->
<div class="wrap1">
<div class="main">
<div class="child"></div>
</div>
<div class="left">
<div id="child"></div>
</div>
<div class="right">
<div class="child"></div>
</div>
</div>
<div id="left">
<div class="inner">this is left sidebar content</div>
</div>
<div id="main">
<div class="inner">this is main content</div>
</div>
<div id="right">
<div class="inner">this is right siderbar content</div>
</div>
</div>
</body>
</html>
完整scss代码
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
$bgc:rgba(120, 120, 120, 0.43);
@mixin border-radius($bglc:#464646,$bdr:3px){
border:($bdr/4) solid $bglc;
border-radius:$bdr;
}
@mixin element-size($width:auto,$height:auto){
width:$width;
height:$height;
}
$menuWidth:50%;
$mainWidth:80%;
.contain{
@include element-size($mainWidth,100%);
margin:0px auto;
//以下为导航栏
.menu{
width:$menuWidth;
margin:10px auto;
list-style-type:none;
background:$bgc;
@include border-radius;
//overflow:auto;//清除浮动1
//清除浮动2
&:after{
content:".";
width:0;
height:0;
display:block;
clear:both;
visibility:hidden;
zoom:1;
};
li{
float:left;
position:relative;
width:100px;
height:18px;
padding:10px;
border-right:1px solid #fff;
text-align:center;
&:hover{
background:rgba(120, 120, 120, 1);
}
.drop-menu{
display:none;
position:absolute;
list-style-type:none;
left:-1px;
top:38px;
border:1px solid #464646;
li{
float:none;
text-align:left;
border:none;
&:hover{
background:#cccccc;
}
}
}
}
a{
text-decoration:none;
}
}
.wrap{
@include element-size(100%,100%);
background:#dddddd;
position:relative;
.main{
position:relative;
@include element-size(auto,100%);
background:red;
margin:0 200px;
//未知元素居中1，子元素外面加一层父元素
.child{
position:absolute;
left:50%;
top:50%;
.center-content{
@include element-size(200px,200px);
margin-top:-50%;
margin-left:-50%;
background:#333;
}
}
}
.left{
position:absolute;
left:0;
top:0;
@include element-size(200px,100%);
background:blue;
#demo{
display:table;
@include element-size(100%,100%);
text-align:center;
p{
display:table-cell;
vertical-align:middle;
background:#eee;
}
}
}
.right{
position:absolute;
right:0;
top:0;
@include element-size(200px,100%);
background:green;
//未知大小子元素居中--采用inline-block
.father{
@include element-size(100%,100%);
text-align:center;
&:after{
display:inline-block;
@include element-size(0,100%);
vertical-align:middle;
content:"";
}
.child{
display:inline-block;
@include element-size(100px,100px);
background:#333;
vertical-align:middle;
}
}
}
}
//三栏布局样式,左右固定宽度,中间自适应
.wrap1{
border-top:3px solid yellow;
@include element-size(100%,40%);
background:#dddddd;
.main{
@include element-size(100%,100%);
float:left;
.child{
@include element-size(auto,100%);
background:red;
margin:0 200px;
}
}
.left{
float:left;
margin-left:-100%;
@include element-size(200px,100%);
background:blue;
}
.right{
float:left;
margin-left:-200px;
@include element-size(200px,100%);
background:green;
}
}
//中间栏固定，左右栏自适应
#left,#right {
float: left;
margin: 0 0 0 -271px;
width: 50%;
*width: 49.9%;//兼容ie
}
#main {
width: 540px;
float: left;
background: green;
}
.inner {
padding: 20px;
}
#left .inner,
#right .inner {
margin: 0 0 0 271px;
background: orange;
}
}
