[CSS布局]简单的CSS三列布局
前言
公司终于可以上外网了,近期在搞RN的东西,暂时脑子有点晕,等过段时间再来写点总结。倒是最近有个新学前端的同学经常会问一些基础知识,工作空闲写了小Demo给他看,全是很基础的知识,纯粹是顺便记录在这里就当温故而知新吧...
CSS布局
关于布局,我们马上就要想到浮动和定位,根据要实现的布局,相当于用浮动和定位等属性进行拖拽即可。现在浏览器对ie等老版本浏览器的兼容需求越来越低,我们还可以采用css3的flexbox布局来设计,这个如今已经是必须要掌握的一个布局方法了,尤其是在移动端非常便捷,最近正火react-native正是引入了flexbox布局,学会了这个,再去做app的开发布局也会感觉爽的停不下来。
言归正传,我们来实现一个最简单的三列布局,需要的效果如下:
两边是固定的侧边栏,中间是自适应宽度的主体内容。我们有好几种方法来实现。
绝对定位法
绝对定位感觉是新手最喜欢用的方法,不管怎么样,就是一个定位叠着一个定位,什么样子都可以定位出来。
- html:
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
</div>
- css:
.container {
position: relative;
width: 100%;
height: 800px;
background: #eee;
}
.left,
.right {
height: 600px;
width: 100px;
position: absolute;
top: 0;
}
.left {
left:0;
background: burlywood;
}
.right {
right: 0;
background: coral;
}
.main {
height: 800px;
margin: 0 110px;
background: chocolate;
}
浮动法
浮动法跟绝对定位法一样,比较简单,但是需要注意一点就是html中main部分要写在最后。
- html:
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
</div>
- css:
.container {
height: 800px;
background: #eee;
}
.left,
.right {
height: 600px;
width: 100px;
}
.left {
float: left;
background: burlywood
}
.right {
float: right;
background: coral
}
.main {
height: 800px;
margin: 0 110px;
background:chocolate
}
margin负值法
margin负值法算是一个因吹丝停的方法,我其实很少用,但是公司的很多老项目中倒是用的不少,这个方法比较巧妙,在html中main部分需要嵌套一个div了,并且顺序也是在第一位,然后浮动,后面left和right部分同样浮动按照正常来说会换行了,所有给一个负值的margin,就巧妙的达到了想要的效果。
- html:
<div class="container">
<div class="main">
<div class="body">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
- css:
.container {
height: 800px;
background: #eee;
}
.main {
float: left;
width: 100%;
height: 800px;
}
.main .body {
height: 100%;
margin: 0 110px;
background: chocolate;
}
.left {
float: left;
margin-left: -100%;
width: 100px;
height: 600px;
background: burlywood;
}
.right {
float: left;
margin-left: -100px;
width: 100px;
height: 600px;
background: coral;
}
flexbox布局法
flexbox布局在这个场景中其实并不是最合适的,因为两边侧栏都是固定宽高,和主体部分也没有等高。不过没有关系,学会其基本用法才是最主要的,记住flexbox分为容器与子元素两部分的样式设置,容器的justify-content 和 align-items是两个最重要的属性,子元素的flex属性,集成了flex-grow,flex-shrink,flex-basis三个属性。具体的用法我前面也有一篇文章写过。同时建议参考下CSS参考手册,里面关于flex属性的两个例子非常好。
- html:
<div class="container">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
- css:
.container {
display: flex;
height: 800px;
background: #eee;
}
.left {
flex: 0 0 100px;
height: 600px;
background: burlywood;
}
.main {
flex: 1 1 auto;
margin: 0 10px;
background: chocolate;
}
.right {
flex: 0 0 100px;
height: 600px;
background: coral
}
总结
突然写点简单的CSS知识感觉神清气爽,感觉找到了刚学时候的新鲜感~不限网的感觉不错,以后继续在博客园逛逛写写。
[CSS布局]简单的CSS三列布局的更多相关文章
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- HTML/CSS学习之 三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化
第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...
- CSS如何实现三列布局?如果两端固定、中间是自适应又该如何做?
使用浮动布局来实现 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动压到左右两个浮动元素的下面,随后在中间元素中再添加一个div元 ...
- CSS三列布局
× 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...
- css 三列布局
前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中间自适应.两列定宽一侧自适应.中间定宽两侧自适应.一侧定宽两列自适应和三列自适应这五种情况 两侧定宽中 ...
- jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释
因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...
- 简单的CSS网页布局--三列布局
三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...
- css实现三列布局,左右固定值,中间自适应。
这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...
- css常见的各种布局下----三列布局
css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...
随机推荐
- 036:DTL常用过滤器(5)
slice过滤器: 类似于 Python 中的切片操作.示例代码如下: {{ some_list|slice:"2:" }} 以上代码将会给 some_list 从 2 开始做切片 ...
- php怎么启动exe文件
PHP作为一种服务器端的脚本语言,象编写简单,或者是复杂的动态网页这样的任务,它完全能够胜任.但事情不总是如此,有时为了实现某个功能,必须借助于操作系统的外部程序(或者称之为命令),这样可以做到事半功 ...
- 谜之WA
完全k叉树 谜之WA #include<bits/stdc++.h> using namespace std; typedef unsigned long long ll; ll k,n; ...
- postgresql主从同步配置
前言 不久前,公司的一台物理机器硬件坏了,导致运行在其上的虚拟机都挂了.很不凑巧的是,我负责的那台虚拟机的系统盘坏了(ps:感觉老天在玩我),导致里面的数据永远的离我而去(ps:当时我的内心是崩溃的) ...
- [CSP-S模拟测试]:Permutation(线段树+拓扑排序+贪心)
题目描述 你有一个长度为$n$的排列$P$与一个正整数$K$你可以进行如下操作若干次使得排列的字典序尽量小对于两个满足$|i−j|\geqslant K$且$|P_i−P_j|=1$的下标$i$与$j ...
- 【转载】Stackless Python并发式编程介绍[已校对版]
Stackless Python并发式编程介绍[已校对版] 作者: Grant Olson 电子邮件: olsongt@verizon.net 日期: 2006-07-07 译者: ...
- centos 7 环境准备工作
删除自带jdk: rpm -e --nodeps `rpm -qa | grep java` 打开 /etc/ 目录下的 profile 文件: vi /etc/profile 将如下代码追加到 pr ...
- 学习:多项式算法----FFT
FFT,即快速傅里叶变换,是离散傅里叶变换的快速方法,可以在很低复杂度内解决多项式乘积的问题(两个序列的卷积) 卷积 卷积通俗来说就一个公式(本人觉得卷积不重要) $$C_k=\sum_{i+j=k} ...
- VS2012不显示最近打开的文件
解决: 1.点击开始,在左下角输入“regedit” 2.右击HKEY_CURRENT_USER,点击查找,输入NoRecentDocsHistory 3.右边找到NoRecentDocsHistor ...
- JS中设置input的type="radio"默认选中
html: <input id="Radio1" type="radio" value="男" name="st_Sex&q ...