左右两列宽度固定,中间一列宽度自适应代码实例

我心飞翔 分类:实例代码

在很多网站的布局中,都有这样的效果,那就是左右两列宽度固定,中间一列宽度自适应。

本站的头部其实就有这样的功能,代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
body {
  padding: 20px;
}
#main {
  float: left;
  width: 100%;
  background-color: green;
  height: 400px;
}
#left {
  width: 200px;
  height: 500px;
  float: left;
  margin-left: -100%;
  background-color: red;
  margin-right: 20px;
}
#right {
  margin-left: -120px;
  float: left;
  background-color: blue;
  width: 120px;
  height: 500px;
}
</style>
</head>
<body>
<div id="main"></div>
<div id="left"></div>
<div id="right"></div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

* {
  margin: 0;
  padding: 0;
}
body {
  padding: 20px;
}

进行一些初始化的设置,首先设置所有元素的内边距和外边距都为0。

然后设置body的内边距为20px,便于效果的观察。

#main {
  float: left;
  width: 100%;
  background-color: green;
  height: 400px;
}

这个是中间一列元素。

左浮动,宽度是百分之百。

#left {
  width: 200px;
  height: 500px;
  float: left;
  margin-left: -100%;
  background-color: red;
  margin-right: 20px;
}

设置为左浮动。

代码的关键是margin-left: -100%,元素的边界是由外边距确定的,所以将外边距设置为负数,那么中间一列元素就可以伸展到左列的下面。关于负外边距的具体用法可以参阅相关阅读。

二.相关阅读:

(1).负外边距可以参阅css margin外边距一章节。

(2).float可以参阅float浮动用法详解一章节。

左右两列宽度固定,中间一列宽度自适应代码实例,这样的场景在实际项目中还是用的比较多的,关于左右两列宽度固定,中间一列宽度自适应代码实例就介绍到这了。

左右两列宽度固定,中间一列宽度自适应代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容