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

Css三栏布局自适应实现几种方法

2016-09-16 11:35 741 查看

Css三栏布局自适应实现几种方法

自适应实现方法我们可以从三个方法来做，一个是绝对定位 ,自身浮动法和margin负值法了，下面我们一起来看看这三个例子吧，希望例子能帮助到各位同学。

绝对定位法三栏布局自适应：

代码如下

复制代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>绝对定位法</title>

<style>

.parent{

margin:auto;

background:#09F;

position:relative;

}

.left{

width:200px;

height:200px;

background:#369;

position:absolute;

left:0;

top:0;

}

.right{

width:250px;

height:200px;

background:#C0C;

position:absolute;

right:0;

top:0;

}

.center{

background:#F00;

margin:0 250px 0 200px;

height:200px;

}

</style>

</head>

<body>

<div class="parent">

<div class="center"></div>

<div class="left"></div>

<div class="right"></div>

</div>

</body>

</html>

说明：三个div元素可以互换位置。

自身浮动法三栏布局自适应:

代码如下

复制代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>自身浮动法</title>

<style>

.parent{

margin:auto;

background:#09F;

}

.left{

width:200px;

height:200px;

background:#369;

float:left;

}

.right{

width:250px;

height:200px;

background:#C0C;

float:right;

}

.center{

background:#F00;

margin:0 250px 0 200px;

height:200px;

}

</style>

</head>

<body>

<div class="parent">

<div class="left"></div>

<div class="right"></div>

<div class="center"></div>

</div>

</body>

</html>

说明：.center所在的div必须在.left和.right之后出现,.left和.right可以互换位置。

margin负值法三栏布局自适应：

代码如下

复制代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>margin负值法</title>

<style>

.parent{

margin:auto;

background:#09F;

}

.left{

width:200px;

height:200px;

background:#369;

margin-left:-100%;

}

.right{

width:250px;

height:200px;

background:#C0C;

margin-left:-250px;

}

.center{

background:#F00;

width:100%;

}

.main{

margin:0 250px 0 200px;

height:200px;

}

.fl{

float:left;

}

</style>

</head>

<body>

<div class="parent">

<div class="center fl">

<div
class="main">Main</div>

</div>

<div class="left fl"></div>

<div class="right fl"></div>

</div>

</body>

</html>

说明：.main为中间主题部分，放到最前面，优先加载；.main外面必须有元素包裹，且宽度为100%；

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

标签：

相关文章推荐

新的分享

章节导航