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确定位 ...
随机推荐
- Linq join
MXS&Vincene ─╄OvЁ &0000022─╄OvЁ MXS&Vincene MXS&Vincene ─╄OvЁ:今天很残酷,明天更残酷,后天很美好, ...
- Gym 100500B
题目给了四个轮子,每个轮子上有按顺序排列的n个数,要求适当旋转每个轮子,使得四个轮子相同行数相加和相同. 首先,可以计算出每一行的和应该是多少,记为Sum.然后固定第一个轮子,二重循环枚举2.3轮子, ...
- case while for
#!/bin/bash#create by howhy 20161214#mysql server start stop restart. /etc/init.d/functionsmysqldir= ...
- :selected
描述: 查找所有选中的选项元素 HTML 代码: <select> <option value="1">Flowers</option> < ...
- 【C++/Qt】Qt中的parent形参
在 派生类的构造函数初始化列表中 调用 父类的带有参数的构造函数,是为了初始化从父类继承来的成员变量.因为这些变量无法直接初始化,只能采用这种方式初始化. 而在qt中,MainWindow中的某成员变 ...
- linux 如何开机自动运行sh脚本
vi /etc/rc.d/rc.local #自动启动oracleecho 502 >/proc/sys/vm/hugetlb_shm_group su - oracle -c 'sh /dat ...
- C# Global Application_Error不执行
今天在开发过程中遇到一个很奇特的问题,就是 Global 文件中的Application_Error 方法不执行的问题,很是苦恼,查了有关这方面的问题,感觉网友们回答的都有点乱,有些人说 在编译时不需 ...
- matlab求解二元一次方程组的解得表达式
- Can’t connect to local MySQL server through socket ‘/var/lib/mysql/mysql.sock’解决方法 + Linux启动/停止/重启Mysql数据库的方法
启动mysql 报错: ERROR 2002 (HY000): Can’t connect to local MySQL server through socket ‘/var/lib/mysql/m ...
- 【HDU5955】Guessing the Dice Roll/马尔科夫
先从阿里机器学习算法岗网络笔试题说起:甲乙两人进行一个猜硬币的游戏.每个人有一个目标序列,由裁判来抛硬币.谁先得到裁判抛出的一串连续结果,谁赢. 甲的目标序列是正正正,乙的目标序列是反正正.那么如果裁 ...