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确定位 ...
随机推荐
- Eclipse创建maven的Web项目
MAVEN作用:管理jar包 1.首先新建一个maven项目,看图: 2.按照以上步骤就可以创建一个maven项目,可以看到最下图的目录结构,但是这样的目录结构是不对的,需要做一些修改. 首先为了避免 ...
- SSIS Error The Execute method on the task returned error code 0x80131621
Error Message: The Execute method on the task returned error code 0x80131621 (Mixed mode assembly is ...
- laravel框架总结(四) -- 服务容器
1.依赖 我们定义两个类:class Supperman 和 class Power,现在我们要使用Supperman ,而Supperman 依赖了Power class Supperman { p ...
- CSS之盒子模型及常见布局
盒子模型的综合应用 CSS提高1 Div ul li 的综合应用很多的网页布局现在都用到这种模式 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM ...
- Oracle求连续的年份
SELECT ('2013') + ROWNUM year FROM dualCONNECT BY ROWNUM <= 2;
- JAVA生成图片缩略图、JAVA截取图片局部内容
package com.ares.image.test; import java.awt.Color; import java.awt.Graphics; import java.awt.Image; ...
- XML与JSON的转换
-(void)test { //XML文本范例 NSString *testXMLString = @"Cake0.55RegularChocolateBluebe ...
- Oracle数据备份bat
@echo on setlocal rem 设置数据库和备份文件参数... set sid=testorcl set username=testname set password=testpwd se ...
- 《BI项目笔记》报到信息分析Cube
数据源设置:数据处理逻辑: --处理丢失外键关系数据 SELECT * FROM T_ReportLeafGrade WHERE FSubFID NOT IN ( SELECT FID FROM T_ ...
- JavaScript为input/textarea自定义hover,focus效果
<title>JavaScript为input/textarea自定义hover,focus效果</title> <script type="text/java ...