码迷,mamicode.com
首页 > Web开发 > 详细

div+css布局自适应小结

时间:2015-09-28 14:40:10      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:

一、两栏布局(左定宽,右自动)
1. float + margin
即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度。
举例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两栏布局-左定宽,右自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
margin: 10px;
}
.wrap_left{
float: left;
width: 200px;
background-color: red;
}
.wrap_right{
margin-left: 220px;
background-color: green;
}
</style>
</head>
<body>
  <div class="wrap">
    <div class="wrap_left">
      我是左栏
    </div>
    <div class="wrap_right">
      我是右栏
    </div>
  </div>
</body>
</html>

2.position + margin
即在父标签设置position属性为relative;子标签中定宽元素设置position属性为absolute;自适应元素设置margin属性,margin-left>=定宽元素宽度。
举例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两栏布局-左定宽,右自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
margin: 10px;
position: relative;
}
.wrap_left{
position: absolute;
width: 200px;
background-color: red;
}
.wrap_right{
margin-left: 220px;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
  <div class="wrap_left">
    我是左栏
  </div>
  <div class="wrap_right">
    我是右栏
  </div>
</div>
</body>
</html>

3.float + 负margin
即给自适应宽度元素定义一个父标签,并设置float属性为left;width为100%;自适应宽度元素设置margin,margin-left应>=定宽元素宽度;
固定宽度元素设置margin-left属性为负值:-100%;
除此之外应注意HTML结构中应先写自适应元素,再写固定宽度元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两栏布局-左定宽,右自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
float: left;
width: 100%;
}
.wrap .wrap_right{
margin-left: 220px;
background-color: green;
}
.wrap_left{
float: left;
width: 200px;
margin-left: -100%;
background-color: red;
}

</style>
</head>
<body>
<div class="wrap">
  <div class="wrap_right">
  我是右栏
  </div>
</div>
<div class="wrap_left">
  我是左栏
</div>
</body>
</html>

注:使用的float属性,必要时清除一下浮动。

4.用table布局实现<!DOCTYPE html><html>

<head>
<meta charset="UTF-8">
<title>两栏布局-左定宽,右自动</title>
<style type="text/css">
html,body,table{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="1" height="300">
  <tr>
    <td width="200" bgcolor="red"></td>
    <td bgcolor="green"></td>
  </tr>
</table>
</body>
</html>

:使用表格时,一定要设置高度才可以

5.触发BFC实现

 

关于BFC是什么、怎么触发BFC以及BFC可以用来做什么,大家可以看看这篇,
实现方法,即为定宽元素设置float:left;自适应宽度元素设置可以触发BFC的属性。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两栏布局-左定宽,右自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}

.wrap_left{
float: left;
width: 200px;
background-color: red;
}
.wrap_right{
overflow: hidden;
background-color: green;
}
</style>
</head>
<body>
  <div class="wrap_left">
    我是左栏
  </div>
  <div class="wrap_right">
    我是右栏
  </div>
</body>
</html>

6.flex伸缩盒方法

即父标签设置display:flex属性,自适应元素设置flex-grow:1;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两栏栏布局-左定宽,右自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
display: flex;
display: -webkit-flex;
}
.wrap_left{
width: 200px;
background-color: red;
}
.wrap_right{
flex-grow:1;
-webkit-flex-grow:1;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
  <div class="wrap_left">
    我是左栏
  </div>
  <div class="wrap_right">
    我是右栏
  </div>
</div>
</body>
</html>

二、三栏布局
掌握了上面的方法,我们会发现制作一个三栏布局也是非常容易的。
下面我们在上面栗子的基础上,看看实现一个两侧定宽,中间自适应的三栏布局如何实现

1. float + margin(两侧定宽,中间自适应)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽,中间自适应</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap_left{
width: 200px;
float: left;
background-color: red;
}

.wrap_content{
margin-left: 220px;
margin-right: 220px;
background-color: yellow;
}
.wrap_right{
width: 200px;
float: right;
background-color: green;
}

</style>
</head>
<body>
  <div class="wrap_left">
    我是左栏
  </div>
  <div class="wrap_right">
    我是右栏
  </div>
  <div class="wrap_content">
    我是中间栏
  </div>
</body>
</html>

2. position + margin(两侧定宽,中间自适应)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽,中间自适应</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap_left{
width: 200px;
position: absolute;
background-color: red;
left: 0;
}

.wrap_content{
margin-left: 220px;
margin-right: 220px;
background-color: yellow;
}
.wrap_right{
width: 200px;
position: absolute;
right: 0;
background-color: green;
}

</style>
</head>
<body>
  <div class="wrap_left">
    我是左栏
  </div>
  <div class="wrap_right">
    我是右栏
  </div>
  <div class="wrap_content">
    我是中间栏
  </div>
</body>
</html>

3.float + 负margin(两侧定宽,中间自适应)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽,中间自适应</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
float: left;;
width: 100%;
}
.wrap_left{
width: 200px;
float: left;
margin-left: -100%;
background-color: red;

}

.wrap_content{
margin-left: 220px;
margin-right: 220px;
background-color: yellow;
}
.wrap_right{
width: 200px;
float: left;
margin-left: -200px;
background-color: green;
}

</style>
</head>
<body>
<div class="wrap">
  <div class="wrap_content">
    我是中间栏
  </div>
</div>
<div class="wrap_left">
  我是左栏
</div>
<div class="wrap_right">
  我是右栏
</div>
</body>
</html>

4.table实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽,中间自动</title>
<style type="text/css">
html,body,table{
margin: 0;
padding: 0;
}

</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="1" height="300">
  <tr>
    <td width="200" bgcolor="red"></td>
    <td bgcolor="yellow"></td>
    <td width="200" bgcolor="green"></td>
  </tr>
</table>
</body>
</html>

5.BFC方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽,中间自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}

.wrap_left{
float: left;
width: 200px;
background-color: red;
}
.wrap_right{
float: right;
width: 200px;
background-color: green;
}
.wrap_content{
overflow: hidden;
background-color: yellow;
}
</style>
</head>
<body>
<div class="wrap_left">
  我是左栏
</div>
<div class="wrap_right">
  我是右栏
</div>
<div class="wrap_content">
  我是中间栏
</div>
</body>
</html>

:HTML中先写定宽元素,再写自适应宽度元素。

6.flex伸缩盒
即父标签设置display:flex属性,自适应元素设置flex-grow:1;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽,中间自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
display: flex;
display: -webkit-flex;
}
.wrap_left{
width: 200px;
background-color: red;
}
.wrap_right{
width: 200px;
background-color: green;
}
.wrap_content{
flex-grow:1;
-webkit-flex-grow:1;
background-color: yellow;
}
</style>
</head>
<body>
<div class="wrap">
  <div class="wrap_left">
    我是左栏
  </div>
  <div class="wrap_content">
    我是中间栏
  </div>
  <div class="wrap_right">
    我是右栏
  </div>
</div>
</body>
</html>

 

div+css布局自适应小结

标签:

原文地址:http://www.cnblogs.com/dingyufenglian/p/4843881.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!