您的位置：首页 > Web前端 > CSS

css布局

2016-06-02 14:49 344 查看

1.双飞翼布局（浏览器解析middle→left→right）

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">

*{
padding: 0;
margin: 0
}
.left{
width: 150px;
background-color: red;
float: left;
margin-left: -100%;
min-height: 30px;
margin-bottom: -9999px;//这里和下面的一行代码是为了实现等高布局
padding-bottom: 9999px;
}
.middle{
background-color: pink;
float: left;
width: 100%;
}
.middle .inner{
margin: 0 100px 0 150px;
background-color: #CDDC39;
min-height: 30px;
margin-bottom: -9999px;
padding-bottom: 9999px;
}
.right{
background-color: blue;
float: left;
width: 100px;
margin-left: -100px;
min-height: 30px;
margin-bottom: -9999px;
padding-bottom: 9999px;
}
section{overflow: hidden}
</style>

</head>

<body>
<section>
<div class="middle">
<div class="inner"><p>我是中间</p><p>我是中间</p><p>我是中间</p><p>我是中间</p><p>我是中间</p><p>我是中间</p><p>我是中间</p><p>我是中间</p></div>
</div>
<div class="left">我是左</div>

<div class="right">我是右</div>
</section>

</body>
</html>

双飞翼布局优点：可以让浏览器在解析时把重要的内容先解析出来

2.left→right→middle

*{
padding: 0;
margin: 0
}
.left{
float: left;
width: 150px;
background-color:red;
}

.right{

float: right;

width: 100px;

background-color: blue;

}

.middle{background-color: pink;padding-left: 150px;padding-right: 100px;}

/* IE 6 hack*/ .middle { _display:inline; _zoom:1; _margin-left:-3px; _margin-right:-3px; _padding-left: 0; _padding-right: 0; }

.middle .inner{width: 100%}

<section>

<div class="left">我是左</div>

<div class="right">我是右</div>
<div class="middle">
<div class="inner">

<p>我是中间</p><p>我是中间</p><p>我是中间</p><p>我是中间</p><p>我是中间</p><p>我是中间</p><p>我是中间</p><p>我是中间</p>

</div>
</div>

</section>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css布局

相关文章推荐

新的分享

章节导航