DIV+CSS前端开发怎么设置自适应

前端开发怎么设置自适应|前端开发者

问题:两栏布局,左边定宽200px,右边自适应。如何实现?
我的第一个反应就是:用flex伸缩盒呀,然后…

下面就来总结一下~

一、两栏布局(左定宽,右自动)

1. float + margin
即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度。
举例:
html代码:
[code] <div class=”wrap”>
<div class=”wrap_left”>
我是左栏
</div>
<div class=”wrap_right”>
我是右栏
</div>
</div>[/code]
css代码
[code] 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;
}[/code]
代码片段 1

<!DOCTYPE html>
<head>
<metacharset=”UTF-8″>
<title>两栏布局-左定宽,右自动</title>
<style type=”text/css”>
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>
<divclass=”wrap”>
<divclass=”wrap_left”>
我是左栏
</div>
<divclass=”wrap_right”>
我是右栏
</div>
</div>
</body>
</html>

2.position + margin
即在父标签设置position属性为relative;子标签中定宽元素设置position属性为absolute;自适应元素设置margin属性,margin-left>=定宽元素宽度。
举例:
html代码
[code] <div class=”wrap”>
<div class=”wrap_left”>
我是左栏
</div>
<div class=”wrap_right”>
我是右栏
</div>
</div>[/code]
css代码
[code] 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;
}[/code]
代码片段 2

<!DOCTYPE html>
<html>
<head>
<metacharset=”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>
<divclass=”wrap”>
<divclass=”wrap_left”>
我是左栏
</div>
<divclass=”wrap_right”>
我是右栏
</div>
</div>
</body>
</html>

3.float + 负margin
即给自适应宽度元素定义一个父标签,并设置float属性为left;width为100%;自适应宽度元素设置margin,margin-left应>=定宽元素宽度;
固定宽度元素设置margin-left属性为负值:-100%;
除此之外应注意HTML结构中应先写自适应元素,再写固定宽度元素。
举例:
HTML代码
[code]<div class=”wrap”>
<div class=”wrap_right”>
我是右栏
</div>
</div>
<div class=”wrap_left”>
我是左栏
</div>[/code]
CSS代码
[code] 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;
}[/code]
代码片段 3

<!DOCTYPE html>
<html>
<head>
<metacharset=”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>
<divclass=”wrap”>
<divclass=”wrap_right”>
我是右栏
</div>
</div>
<divclass=”wrap_left”>
我是左栏
</div>
</body>
</html>

[color=Red]注[/color]:使用的float属性,必要时清除一下浮动。

4.用table布局实现
来自评论里@qazxsw的方法:
[code]<table width=”100%” cellspacing=”0″ cellpadding=”0″ border=”1″ height=”300″>
<tr>
<td width=”200″ bgcolor=”red”></td>
<td bgcolor=”green”></td>
</tr>
</table>[/code]
代码片段 4

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

不过这个方法,一定要设置高度才可以~

5.触发BFC实现 —— 来自评论里柯南同学@15913127081的方法
关于BFC是什么、怎么触发BFC以及BFC可以用来做什么,大家可以看看这篇,前端精选文摘:BFC 神奇背后的原理
实现方法,即为定宽元素设置float:left;自适应宽度元素设置可以触发BFC的属性。(可以触发BFC的属性?继续看上面那个链接!!)
示例:
HTML代码:
[code] <div class=”wrap_left”>
我是左栏
</div>
<div class=”wrap_right”>
我是右栏
</div>[/code]
CSS代码:
[code] html,body,div{
margin: 0;
padding: 0;
}

.wrap_left{
    float: left;
    width: 200px;
    background-color: red;
}
.wrap_right{
    overflow: hidden;
    background-color: green;
}[/code]

代码片段 5

<!DOCTYPE html>
<html>
<head>
<metacharset=”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>
<divclass=”wrap_left”>
我是左栏
</div>
<divclass=”wrap_right”>
我是右栏
</div>
</body>
</html>

前面有说到一般我都是用的flex伸缩盒,那也来说一下用flex怎么实现的吧
6.flex伸缩盒方法
即父标签设置display:flex属性,自适应元素设置flex-grow:1;
HTML代码
[code] <div class=”wrap”>
<div class=”wrap_left”>
我是左栏
</div>
<div class=”wrap_right”>
我是右栏
</div>
</div>[/code]
CSS代码
[code] 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;
}[/code]
代码片段 6

<!DOCTYPE html>
<html>
<head>
<metacharset=”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>
<divclass=”wrap”>
<divclass=”wrap_left”>
我是左栏
</div>
<divclass=”wrap_right”>
我是右栏
</div>
</div>
</body>
</html>

进阶

二、三栏布局

掌握了上面的方法,我们会发现制作一个三栏布局也是非常容易的。
下面我们在上面栗子的基础上,看看实现一个两侧定宽,中间自适应的三栏布局如何实现
1. float + margin(两侧定宽,中间自适应)
HTML代码:
[code] <div class=”wrap_left”>
我是左栏
</div>
<div class=”wrap_right”>
我是右栏
</div>
<div class=”wrap_content”>
我是中间栏
</div>[/code]
CSS代码:
[code]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;
}[/code]

代码片段 7

<!DOCTYPE html>
<html>
<head>
<metacharset=”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>
<divclass=”wrap_left”>
我是左栏
</div>
<divclass=”wrap_right”>
我是右栏
</div>
<divclass=”wrap_content”>
我是中间栏
</div>
</body>
</html>

2. position + margin(两侧定宽,中间自适应)
HTML代码:
[code]<div class=”wrap_left”>
我是左栏
</div>
<div class=”wrap_right”>
我是右栏
</div>
<div class=”wrap_content”>
我是中间栏
</div>[/code]
CSS代码
[code] 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;
}[/code]

代码片段 8

<!DOCTYPE html>
<html>
<head>
<metacharset=”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>
<divclass=”wrap_left”>
我是左栏
</div>
<divclass=”wrap_right”>
我是右栏
</div>
<divclass=”wrap_content”>
我是中间栏
</div>
</body>
</html>

3.float + 负margin(两侧定宽,中间自适应)
HTML代码
[code]<div class=”wrap”>
<div class=”wrap_content”>
我是中间栏
</div>
</div>
<div class=”wrap_left”>
我是左栏
</div>
<div class=”wrap_right”>
我是右栏
</div>[/code]
CSS代码
[code] 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;
}[/code]

代码片段 9

<!DOCTYPE html>
<html>
<head>
<metacharset=”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>
<divclass=”wrap”>
<divclass=”wrap_content”>
我是中间栏
</div>
</div>
<divclass=”wrap_left”>
我是左栏
</div>
<divclass=”wrap_right”>
我是右栏
</div>
</p>
<p>
</body>
</html>

4.table实现
[code] <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>[/code]
代码片段 10

<!DOCTYPE html>
<html>
<head>
<metacharset=”UTF-8″>
<title>三栏布局-两侧定宽,中间自动</title>
<style type=”text/css”>
html,
body,
table{
margin:0;
padding:0;
}
</style>
</head>
<body>
<tablewidth=”100%” cellspacing=”0″ cellpadding=”0″ border=”1″ height=”300″>
<tr>
<tdwidth=”200″ bgcolor=”red”></td>
<tdbgcolor=”yellow”></td>
<tdwidth=”200″ bgcolor=”green”></td>
</tr>
</table>
</body>
</html>

5.BFC方法
HTML代码
[code] <div class=”wrap_left”>
我是左栏
</div>
<div class=”wrap_right”>
我是右栏
</div>
<div class=”wrap_content”>
我是中间栏
</div>[/code]
CSS代码
[code] 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;
}[/code]

代码片段 11

<!DOCTYPE html>
<html>
<head>
<metacharset=”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>
<divclass=”wrap_left”>
我是左栏
</div>
<divclass=”wrap_right”>
我是右栏
</div>
<divclass=”wrap_content”>
我是中间栏
</div>
</p>
<p>
</body>
</html>

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

6.flex伸缩盒
即父标签设置display:flex属性,自适应元素设置flex-grow:1;
HTML代码
[code] <div class=”wrap”>
<div class=”wrap_left”>
我是左栏
</div>
<div class=”wrap_content”>
我是中间栏
</div>
<div class=”wrap_right”>
我是右栏
</div>
</div>[/code]
CSS代码
[code] 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;
}[/code]
代码片段 12

<!DOCTYPE html>
<html>
<head>
<metacharset=”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>
<divclass=”wrap”>
<divclass=”wrap_left”>
我是左栏
</div>
<divclass=”wrap_content”>
我是中间栏
</div>
<divclass=”wrap_right”>
我是右栏
</div>
</div>
</body>
</html>

前端开发怎么设置自适应|网站前端开发

https://www.rokub.com

» 本文来自:前端开发者 » 《DIV+CSS前端开发怎么设置自适应》
» 本文链接地址:https://www.rokub.com/3232.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!