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

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

代码如下

复制代码

<!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%；

时间： 2024-04-05 01:01:48

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

Css三栏布局自适应实现几种方法的相关文章

div+css横向三栏布局自适应宽度示例

垂直三栏布局拥有相同高度的方法(转)

垂直三栏布局拥有相同高度的方法

css+div三栏布局左右固定宽中间自适应

用CSS的float属性创建三栏布局网页的方法

div三栏布局，右侧自适应宽度代码示例

div-DIV三栏布局哪种方式好？

CSS经典三栏布局方案

Jquery easy UI 上中下三栏布局