css布局之三列布局
网站上使用三列布局的还是比较多的,不过三列和两列有些相似：
1.自适应三列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列自适应布局</title>
</head>
<style>
.wrapper{
width: 880px;
height: 300px;
margin:0 auto;
}
.left{
float: left;
width: 33.3%;
height: 300px;
background-color: #ccc;
}
.middle{
float:left;
width: 33.3%;
height: 300px;
background-color: #9c9c9c;
}
.right{
float: right;
width: 33.3%;
height: 300px;
background-color: #198610;
}
</style>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div> </body>
</html>
2.固定两列，自适应中间一列
这个要考虑多种情况，我就遇见过下面的情况，大家可以看看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列两固定中列自适应布局</title>
</head>
<style>
.wrapper{
width: 880px;
height: 300px;
margin:0 auto;
}
.left{
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.middle{
margin-left:200px;
margin-right:200px;
height: 300px;
background-color: #9c9c9c;
}
.right{
float: right;
width: 200px;
height: 300px;
background-color: #198610;
}
</style>
<body>
<div class="wrapper"> <div class="left"></div>
<div class="middle">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
<div class="right"></div> </div> </body>
</html>
这个是下面截图的样子
看见没有，是这样的，但是如果我吧<div class="middle">放在最后，效果又不一样
所以这个效果达到效果，这个也是三列布局，所以这个方式有点bugger，大家可以注意
我们可以用用绝对定位，其实实现三列布局很多种方式，你也可以用table来实现，li来实现等方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列两固定中列自适应布局</title>
</head>
<style>
.wrapper{
width: 880px;
height: 300px;
margin:0 auto;
position: relative;
}
.left{
position: absolute;
left: 0px;
top: 0px;
width: 200px;
height: 300px;
background-color: #ccc;
}
.middle{
margin-left:200px;
margin-right:200px;
height: 300px;
background-color: #9c9c9c;
}
.right{
position: absolute;
top: 0px;
right: 0px;
width: 200px;
height: 300px;
background-color: #198610;
}
</style>
<body>
<div class="wrapper"> <div class="left"></div>
<div class="middle">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
<div class="right"></div> </div> </body>
</html>
3.固定三列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列两固定中列自适应布局</title>
</head>
<style>
.wrapper{
width: 880px;
height: 300px;
margin:0 auto;
position: relative;
}
.left{
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.middle{
float: left;
width: 480px;
height: 300px;
background-color: #9c9c9c;
}
.right{
float: left;
width: 200px;
height: 300px;
background-color: #198610;
}
</style>
<body>
<div class="wrapper"> <div class="left"></div>
<div class="middle">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
<div class="right"></div> </div> </body>
</html>
我们这里都是做悬浮做了三列固定导航，如果在<div class="wrapper"></div>
后加上一个<div class="footer"></div> 那么就要清除悬浮，清楚悬浮的方式有几种，后面我们会讲到 clear:both;或者在wrapper的类中加入 overflow:hidden. 或 :after :before等伪类的定义，清除悬浮
css布局之三列布局的更多相关文章
- 简单的CSS网页布局--一二列布局
1.一列布局 (一)一列自适应 自适应浏览器,随着浏览器的拉伸而变化,一般宽度采用百分比的写法,很简<!DOCTYPE html> <html> <head lang=& ...
- 简单的CSS网页布局--三列布局
三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...
- css实现三列布局，左右固定值，中间自适应。
这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...
- CSS实现横列布局的方法总结
一.使用float实现横列布局的方法 如下面所示:DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行 div1 div2 实现下面图片中布局的css样式如下: 分析: 1.第一行第一 ...
- [CSS布局]3列布局：左右两列固定宽度、中间列自适应满宽
一种常见的3列布局,左右两列固定宽度.中间列自适应满宽.整个网页不出现横向滚动条 纯CSS实现 效果图: 代码: <!DOCTYPE html> <html lang="e ...
- 一、CSS实现横列布局的方法总结
一.使用float实现横列布局的方法 如下面所示:DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行 div1 div2 实现下面图片中布局的css样式如下: 分析: 1.第一行第一 ...
- css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）
(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
- css布局之一列布局
在我们浏览网页中经常看见一列布局其实一列布局就是 一般的一列布局的都是固定宽度的 body{margin:0;padding:0} .main{width:800px;height:300px;bac ...
- CSS实现三列布局
三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...
随机推荐
- Material Design Lite，简洁惊艳的前端工具箱 之 布局组件。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...
- 解决ADB端口占用问题
方式一5037为adb默认端口,若5037端口被占用,查看占用端口的进程PIDC:\Users\wwx229495>netstat -aon|findstr 5037 TCP 127. ...
- Grunt备忘录
一.安装Grunt 应在全局环境下安装Grunt,以保障在任何目录下都能够正确找到grunt npm install grunt-cli -g 二.对已有Grunt基本目录结构文件进行操作 Grunt ...
- Qt5程序参数包含中文GBK编码的问题
1.背景 Qt5程序(WeekReport.exe)的main函数里有如下代码: //only for test int main(int argc, char *argv[]) { QCoreApp ...
- datatable-提示
｀默认columns配置问题: 记住是columnDefs不是columnsDefs ｀Cannot read property 'sWidth' of undefined: columns的数量和t ...
- SQL递归查询(with cte as)
with cte as ( select Id,Pid,DeptName,0 as lvl from Department where Id = 2 union all select d.Id,d.P ...
- HTML5 属性 认知
HTML5中 不支持 Html4.01的属性: <acronym> <applet> <basefont> <big> <center> ...
- dotfiles管理
刚刚知道dotfiles这个东西,百度也没发现什么太有价值的讲解,还都是英文,所以自己立志来好好屡屡清楚 1.dotfiles是什么?我自己的理解:linux下(mac下)有各种app,每个人会根据自 ...
- js中的什么时候需要用new来实例化?
有人说js中函数和类就是一个概念,请问:1 为什么我们在大多数情况下没有用new来实例化一个类(函数),如下 JavaScript code 1 2 3 4 5 6 7 <script> ...
- 17-underscore库（下）
一.函数介绍 1.bind 结构 _.bind(function, object, *arguments) 说明 一个对象中所有的成员函数的this都指向这个对象 举例 _.bind(function ...