Layout 不可思议(二)—— 两侧定宽的三列布局
三列布局作为网页设计中最常见的布局,其实现方法早已被诸位前端大神摸透
网上相关的文章很多,原本已无必要再做赘述
不过既然开了 Layout 系列,三列布局就是必修课
本文整理了一些常用的实现方法,然后加入了一些个人愚见,希望能给诸位看官一些新的启发
效果图:
一、绝对定位
最容易理解的一种方法,以中间内容为主体,通过 margin 或者 padding 将两侧撑开,最后用 absolute 定位两侧
HTML 结构:
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
CSS 样式:
.container {
position: relative;
}
.left,
.right {
position: absolute;
top:;
width: 200px;
}
.left {
left:;
}
.right {
right: 0px;
}
.main {
margin: 0 200px;
}
二、负值 margin
绝对定位方案的变种,利用 margin 可以设置负值的特性,模拟出类似于定位的效果,应用最广的方案
HTML 结构:
<div class="container">
<div class="left"></div>
<div class="main-wrap">
<div class="main"></div>
</div>
<div class="right"></div>
</div>
CSS 样式:
.container {
overflow: hidden;
}
.left,
.right {
float: left;
width: 200px;
}
.main-wrap {
float: left;
width: 100%;
margin: 0 -200px;
}
.main {
margin: 0 200px;
}
这种方案的重点在于,中间列 main 一定要用双层标签,外层为容器,内层才是主体内容
三列都设置了浮动 float,可以用 display: inline-block 替换
关于这种方案还有一种变式:
将中间列的 html 部分挪到最前,然后 left 容器设置 margin-left: -100%
aaarticlea/png;base64,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" alt="" />
aaarticlea/png;base64,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" alt="" />
这种方案也能实现同样的效果,但由于 html 结构的顺序发生了改变,所以我更推荐使用原始方案
三、左右浮动
流式布局,分别设置左列 float:left 和右列 float:right,然后让中间列“流”入两列之间
HTML 结构:
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
CSS 样式:
.container {
overflow: hidden;
}
.left,
.right {
width: 200px;
}
.main {
width: auto;
}
.left {
float: left;
}
.right {
float: right;
}
因为使用了左右浮动,所以不能用 display:inline-block 替换,而且中间列必须放到最后
四、Flex 布局
最简单省事儿但兼容性最差的方案,可以用在移动端 如果移动端也要做三列布局的话
HTML 结构:
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
CSS 样式:
.container {
display: flex;
}
.left, .right {
width: 200px;
}
.main {
display: flex;
flex: auto;
}
Layout 不可思议(二)—— 两侧定宽的三列布局的更多相关文章
- web标准(复习)--3 二列和三列布局
今天学习二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三 ...
- CSS三列布局
× 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- css 三列布局
前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中间自适应.两列定宽一侧自适应.中间定宽两侧自适应.一侧定宽两列自适应和三列自适应这五种情况 两侧定宽中 ...
- 三列布局,读《css那些事儿》
1.两列定宽,中间自适应 要点:浮动.负边距效果.mainbox增加内容div并设置margin.:after清除浮动 原理:mainbox的浮动并将其宽度设置为100%,次要内容及侧边栏设置固定宽度 ...
- CSS实现三列布局
三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...
- DIV左、中、右三列布局的各类情况说明
一.中间定宽.左.右侧百分比自适应: 1.HTML代码: <div id="left"> <div id="innerLeft"> &l ...
- css三列布局之双飞翼pk圣杯
三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...
- 【css】css2实现两列三列布局的方法
前言 对于 flex 弹性布局相信大家都有所了解,它是 css3 中的属性,然而它具有一定的兼容性问题.楼主前几天面试时遇到了面试官需要设计一个两列布局,我当然就说父元素 flex 吧哩吧啦,然而需要 ...
随机推荐
- iOS中常见的锁
多线程的安全隐患 一块资源可能会被多个线程共享,也就是说多个线程可能会访问同一块资源. 比如多个线程同时操作同一个对象,同一个变量. 当多个线程访问同一块资源时,很容易引发数据错乱和数据安全问题. 比 ...
- 使用Python提取中文字符
#功能:国际化测试,用于提取应用设计包中的中文字符,并输出report#解压---筛选---整理路径---提取中文---输出报告 ################################### ...
- Java数据结构和算法(十)——二叉树
接下来我们将会介绍另外一种数据结构——树.二叉树是树这种数据结构的一员,后面我们还会介绍红黑树,2-3-4树等数据结构.那么为什么要使用树?它有什么优点? 前面我们介绍数组的数据结构,我们知道对于有序 ...
- 【Struts2的执行流程,这个博主写的很详细】
http://blog.csdn.net/wjw0130/article/details/46371847
- form表单参数传递和url参数传递的区别
template: form表单: <form action="" method='GET'> <div class="input-group" ...
- js onmouseover与onmouseout用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- win8安装mysql5.5最后配置没有反应
win8安装mysql5.5最后配置没有反应 win8下安装mysql5.5一路顺利,可是到最后一步配置mysql服务及登录password后.注冊服务并启动服务界面一直没有不论什么反应: 本来以为是 ...
- Javascript--cookie创建与查看
创建cookie 以下代码将创建一个cookie,该cookie名称为UserName,值为Paul,过期时间为7天后(2015年6月29日) <span style="font-si ...
- js通用方法检測浏览器是否已安装指定插件(IE与非IE通用)
/* * 检測是否已安装指定插件 * * pluginName 插件名称 */ function checkPlugins(pluginName) { var np = navigator.plugi ...
- Oracle之PLSQL
PL/SQL Developer是一个集成开发环境,专门开发面向Oracle数据库的应用.PL/SQL也是一种程序语言,叫做过程化SQL语言(Procedural Language/SQL)它是Ora ...