CSS常用布局方式-两列布局、三列布局
CSS基础
2.几种布局方式
1）table布局
当年主流的布局方式，第一种是通过table tr td布局
示例：
<style type="text/css">
table{
width: 800px;
height: 300px;
border-collapse: collapse;
}
.left{
background-color: red; }
.right{
background-color: blue;
}
</style>
<body>
<table>
<tr>
<td class="left">左</td>
<td class="right">右</td>
</tr>
</table>
</body>
页面效果： 文字自动垂直居中，很方便 同样可以设置左右的width
第二种是类比表格的table class
示例：
<style type="text/css">
.table{
display: table;
width: 800px;
height: 300px;
/*border-collapse: collapse;*/ }
.tb_row{
display: table-row;
} .tb_cell{
display: table-cell;
vertical-align: middle;
} .left{
background-color: red;
}
.right{
background-color: blue;
}
table
</style>
<body>
<div class="table">
<div class="tb_row">
<div class="left tb_cell">左</div>
<div class="right tb_cell">右</div>
</div>
</div>
</body>
页面效果： 跟表格布局一样 
2）flexbox布局
- 两列布局
**关键：父级元素设置display：flex**
示例：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.parent{
width: 800px;
height: 300px;
display: flex;
}
.left{
width: 300px;
height: 100%;
background: red;
}
.right{
flex: 1;
height: 100%;
background: blue;
} </style> <body>
<div class="parent">
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
页面效果：
- 三列布局
**关键：父级元素设置display：flex**
示例：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.parent{
width: 800px;
height: 300px;
display: flex;
}
.left{
width: 300px;
height: 100%;
background: red;
}
.middle{
width: 200px;
height: 100%;
}
.right{
flex: 1;
height: 100%;
background: blue;
} </style>
<body>
<div class="parent">
<div class="left">左</div>
<div class="middle">中</div>
<div class="right">右</div>
</div>
</body>
页面效果：
3）float布局 （float+margin）
兼容性好 但是要注意清楚浮动（clear: both display:block）
- 两列布局——左侧定宽，右侧自适应
**关键：**
*左侧设置float：left
右侧：margin-left： leftWidth*
示例：
<style>
*{
margin: 0;
padding: 0;
} .parent{
width:800px;
height:200px;
}
.left{
width:200px;
height:100%;
float:left;
background-color:red;
}
.right{
height:100%;
margin-left:200px;
background-color:blue;
}
</style>
<body>
<div class="parent">
<div class="left">左</div>
<div class="left">右</div>
</div>
</body>
页面效果：
- 三列布局
**关键：**
*左侧设置float：left
右侧设置float:right
中间：margin-left： leftWidth；margin-right：rightWidth*
示例：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.parent{
width: 800px;
height: 200px;
}
.left{
width: 200px;
height: 100%;
background-color: red;
float: left;
} .right{
float: right;
width: 200px;
background-color: blue;
height: 100%;
} .middle{
margin-left: 200px;
margin-right: 200px;
}
</style> <body>
<div class="parent">
<div class="left">左</div>
<div class="right">右</div>
<div class="middle">中</div> </div>
</body>
页面效果：
**注意：float特点：尽量靠上，尽量靠左（右），所以右侧浮动div要先写，中间div后写**
4）inline-block布局——不存在清除浮动问题 适用与定宽的布局
<style type="text/css">
.parent{
font-size: 0;
width: 800px;
height: 200px;
}
.left{
font-size: 14px;
width: 300px;
height: 200px;
display: inline-block;
background-color: red;
}
.right{
font-size: 14px;
width: 500px;
height: 200px;
display: inline-block;
background-color: blue;
}
</style>
<div class="parent">
<div class="left">左</div>
<div class="right">右</div>
</div>
页面效果：
注意： 想要父级元素的宽度等于两个子元素宽度之和，需要设置父级元素的 font-size：0 否则两个子元素不会再一行展示
同时，需要设置两个子元素的font-size: 14px； 否则子元素内的文字不会展示！
**想象成文字，注意间隙的处理！！！** 间隙存在于两个div间的空白： 
5）响应式布局
让前台页面可以再不同的设备，不同大小的屏幕上正常展示，一般都是指处理屏幕大小问题
首先设置viewport
利用rem 1rem=html.font-size
<meta name="viewport" content="width=device-width,initial-scale=1.0">
利用media query
@media (max-width: 640px){
.left{
display: none;
}
}
三.Q&A
1) position： absolute 和fixed 的区别：
前者是相对于最近的relative/absolute 元素
后者是相对于屏幕 （viewport）
2） display：inline-block 间隙的原因
原因： 空白字符间距
解决：清除空白字符或者消灭间距
—中间不留空白
<div>
</div></div>
</div>
—将空白字符注释
<div>
</div><!--
--><div></div>
—消灭间距
font-size: 0
3)如何清除浮动以及原因
浮动的元素不占用父元素的空间，有可能会超出父元素进而对其他元素产生影响，所以要清除父元素浮动
方法：
让盒子负责自己的布局：
overflow: hidden(auto)
在元素后面加上：
::after{clear: both}
4)如何适配移动端页面
- viewport
- rem/viewport/media query
- 设计上： 隐藏 折行 自适应
CSS常用布局方式-两列布局、三列布局的更多相关文章
- web标准(复习)--3 二列和三列布局
今天学习二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三 ...
- CSS两列及三列自适应布局方法整理
布局 自适应 两列 三列 在传统方法的基础上加入了Flex布局并阐述各方法的优缺点,希望对大家有所帮助.先上目录: 两列布局:左侧定宽,右侧自适应 方法一:利用float和负外边距 方法二:利用外边距 ...
- css 左右固定宽度，中间自适应的三列布局
float——浮动布局: 使用浮动,先渲染左右两个元素,分别让他们左右浮动,然后再渲染中间元素,设置它的margin左右边距分别为左右两个元素的宽度. <!DOCTYPE html> &l ...
- ccs之经典布局（二）（两栏，三栏布局）
接上篇ccs之经典布局(一)(水平垂直居中) 四.两列布局 单列宽度固定,另一列宽度是自适应. 1.float+overflow:auto; 固定端用float进行浮动,自适应的用overflow:a ...
- CSS布局：Float布局过程与老生常谈的三栏布局
原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...
- 转：CSS布局：Float布局过程与老生常谈的三栏布局
使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...
- Web标准：三、二列和三列布局
知识点: 1.二列自适应宽度 2.二列固定宽度 3.二列固定宽度居中 4.xhtml的块级元素(div)和内联元素(span) 5.float属性 6.三列自适应宽度 7.三列固定宽度 8.三列固定宽 ...
- css常用居中方式
一.水平居中 1.内联元素 父级元素加 text-align: center 即可 html <div class="container"> <a>内联元素 ...
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
随机推荐
- SSRS 报表开发过程中,除数为0的处理
这里仅供记录,方法并非原创 在SSRS报表开发过程中,我们经常会遇到除数为0的计算 一般来说,我们都是通过IIF来进行处理,比如: =IIF(B=0,0,A/B) 但实际效果,则是,如果B=0的时候, ...
- 微信小程序 + Bmob后端云
闲暇之余,写了一个私人的小程序,但由于带有商品.订单功能被拒了(腾讯太狗带了,只有商家才可以使用这种功能),没办法,不给过审,那就拿出来分享一下. 原本想的是做一个超市类的电商平台,带有下单支付等功能 ...
- 6. Go语言—字符串操作
一.字符串支持的转义字符 \r 回车符(返回行首) \n 换行符(直接跳到下一行的同列位置) \t 制表符 \' 单引号 \" 双引号 \\ 反斜杠 \uXXXX Unicode字符码值转义 ...
- 爬虫之爬取豆瓣图书名字及ID
from urllib import request from bs4 import BeautifulSoup as bs #爬取豆瓣最受关注图书榜 resp = request.urlopen(' ...
- 训练自己数据-xml文件转voc格式
首先我们有一堆xml文件 笔者是将mask-rcnn得到的json标注文件转为xml的 批量json转xml方法:https://www.cnblogs.com/bob-jianfeng/p/1112 ...
- scala java 混合编译配置
参考:https://www.jianshu.com/p/f20550cd1067 pom.xml 配置 <build> <plugins> <plugin> &l ...
- SQL Server 创建 修改 删除数据表
1. 图形界面方式操作数据表 (1)创建和修改数据表 列名中如果有两个以上单词时,最好用下划线连接,否则可能会给将来的查询维护带来不便.我们公司美国佬做的数据库就很烦,所有列名都有空格,一旦忘记用方括 ...
- ORB-SLAM2 地图保存
一.简介 在ORB-SLAM2的System.h文件中,有这样一句话:// TODO: Save/Load functions,让读者自己实现地图的保存与加载功能.其实在应用过程中很多场合同样需要先保 ...
- Codechef September Challenge 2019 Division 2
Preface 这确实应该是我打过的比较水的CC了(其实就打过两场) 但由于我太弱了打的都是Div2,所以会认为上一场更简单,其实上一场Div的数据结构是真的毒 好了废话不多说快速地讲一下 A Eas ...
- Java 并发系列之十一：并发线程带来的风险
1. 概述 在并发中有两种方式,一是多进程,二是多线程,但是线程相比进程花销更小且能共享资源. 线程带来的风险: 1. 安全性问题.错误的问题永不发生.竞态条件(顺序敏感). 2. 活跃性问题.正确的 ...