day08—css布局解决方案之多列布局
转行学开发,代码100天——2018-03-24
本文将记录CSS布局之垂直布局解决方案。
常见的多列布局包括以下:
1.定宽+自适应
2.两列定宽+一列自适应
3.不定宽+自适应
4.两列不定宽+一列自适应
5.等分布局
6.定宽+自适应+等高
下文将先后对上述6种方案作详细说明。
1.定宽+自适应
- 使用float+overflow
实现方法:通过左边框脱离文本流,设置右边规定溢出元素框时发生的事情以达到多列布局,
即左边框:float:left;width/margin-left
右边框:overflow:hidden;
<div class="parent">
<div class="left">
<p>left</p>
</div> <div class="right">
<p>right</p>
<p>right</p> </div>
</div>
.left
{
float: left;
width:300px;
margin-left: 20px;
border:1px solid red;
}
.right
{
overflow: hidden;
width: 600px;
border:1px solid orange;
}
(为了便于查看,添加了边框效果)
该方法简单,但不支持ie6.
- 使用float+margin方法
实现方法:通过将左边框脱离文本流,右边框向右移动一定的距离形成多列布局。
即:左边框:float:left;margin-left
右边框:margin-left:
.left
{
float: left;
margin-left: 200px;
border:1px solid red;
}
.right
{
margin-left:300px;
width: 300px;
border:1px solid orange; }
该方法中同时设置了左右边框的左边距,当右边距小于等于左边距时,会发生重叠。因此选用该方法设置多列布局时,要合理设置边距值。
该方法简单易用,依然存在兼容性问题。
- 使用foat+margin(改良版)
实现方法:在方法(1)的基础上,给右边框添加一个父框,设置左、右父框属性
即左边框:float:left;margin-left、position:relative
右边框(父):float:right、width:100%;margin-left:(或者margin-right:)
右边框:margin-left:
<div class="parent">
<div class="left">
<p>left</p>
</div> <div class="right-fix"> <div class="right">
<p>right</p>
<p>right</p> </div>
</div>
</div>
.left
{
float: left;
position: relative;
width: 100px;
margin-left: 300px;
border:1px solid red;
}
.right-fix
{
margin-right:100px;
width: 600px;
float: right;
border:1px solid orange;
}
.right
{
margin-left: 30px;
border:1px solid #ccc;
}
运行效果如下图,该方法设置属性及属性值时需要反复调整,易于理解。
- 使用table方法
实现方法:将父框设置为表格,将左右边框转化为同一行的td,实现多列布局
父框:display:table; width:100%;table-layout:fixed;
左右框:display:table-cell,最后设置左框的width,padding-right属性
.parent
{
display: table;
width: 100%;
table-layout: fixed;
}
.left,.right
{
display: table-cell;
border:1px solid red; }
.left
{
width: 300px;
padding-right: 20px;
}
- 使用CSS3的布局利器 flex方法
实现方法:先将父框设置为display:flex,再设置左框flex:1,最后设置左框width、margin-right。
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex属性放置在不同盒子内,多列效果不同
.parent
{
display: flex;
flex: 1;
}
.left
{
width: 300px;
margin-right: 100px;
border:1px solid red;
/*flex: 1;*/
}
.right
{
/*flex: 1;*/
border:1px solid red;
}
2.两列定宽+一列自适应
实现方法:
先将左、中框设置为float:left、width、margin-right,再设置右框overflow:hidden。
<!--两列定宽+一列自适应-->
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="center">
<p>center</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
.left,.center
{
float: left;
width: 300px;
margin-left: 30px;
}
.right
{
overflow: hidden;
}
3.不定宽+自适应
- 使用float+overflow方法
实现方法:左框:float:left/margin-right:
右框:overflow:hidden
最后可设置左框中的内容width
与定宽+自适应方法相比,只是减少了左右框的宽度设置。
.left
{
float: left;
margin-right: 20px;
border:1px solid red;
}
.right
{
overflow: hidden;
border:1px solid #ccc;
}
- 使用table方法
实现方法:先将父框设置为display: table、width: 100%,再设置左、右框display: table-cell,最后设置左框width: 0.1%、padding-right以及左框中的内容width。
.parent
{
display: table;
width: 100%;
}
.left,.right
{
display: table-cell;
}
.left
{
width: 0.1%;
padding-right: 20px;
}
.left p
{
width: 200px; }
- 使用flex方法
实现方法:先将父框设置为display:flex,再设置右框flex:1,最后设置左框margin-right:20px、左框中的内容width。
.parent
{
display: flex;
}
.left
{
flex: 1;
margin-left: 20px;
}
.left p
{
width: 300px;
}
flex功能强大,兼容性存在一定的问题。
4.两列不定宽+一列自适应
实现方法:先将左、中框设置为float:left;margin-right:..再设置右框overflow:hidden.最后给左中框中的内容设置width
.left,.center
{
float: left;
margin-right: 20px;
}
.right
{
overflow: hidden;
}
.left p,.right p
{
width: 100px;
}
5.等分布局
- 使用float
实现方法:先将父框设置为margin-left:-*px;再设置子框float:left;width:25%;padding-left/box-sizing:border-box
<div class="parent">
<div class="column"><p>1</p></div>
<div class="column"><p>2</p></div>
<div class="column"><p>3</p></div>
<div class="column"><p>4</p></div>
</div>
.parent
{
margin-left: -20px;
}
.column
{
float: left;
width: 25%;
padding-left: 20px;
box-sizing: border-box;
}
- 使用table方法
实现方法:
先将父框的修正框设置为margin-left: -*px,再设置父框display: table、width:100%、table-layout: fixed,设置子框display: table-cell、padding-left。
<div class="parent-fix">
<div class="parent">
<div class="column"><p>1</p></div>
<div class="column"><p>2</p></div>
<div class="column"><p>3</p></div>
<div class="column"><p>4</p></div>
</div>
</div>
.parent-fix
{
margin-left: -20px; }
.parent
{
display: table;
width: 100%;
table-layout: fixed;
}
.column
{
display: table-cell;
padding-left: 20px;
}
- 使用flex
实现方法:将父框设置为display: flex,再设置子框flex: 1,最后设置子框与子框的间距margin-left。
.parent
{
display: flex;
}
.column
{
flex: 1;
}
.column+.column
{
margin-left: 20px;
}
6.定宽+自适应+两块高度一样高
- 使用float方法
实现方法:父框 overflow:hidden;左右框设置为 padding-bottom:9999px;margin-left:-9999px;
左框:float:left;width/margin-right
右框:overflow:hidden
[ 伪等高,不是真正意义上的等高 ]
.parent
{
overflow: hidden;
} .left,.right
{
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.left
{
float: left;
width: 100px;
margin-right: 20px;
}
.right
{
overflow: hidden;
}
- 使用flex方法
实现方法:将父框设置为display: flex,再设置左框width、margin-right/margin-right,最后设置右框flex:1。
.parent
{
display: flex;
}
.left
{
width: 300px;
margin-left:20px;
}
.right
{
flex: 1;
}
day08—css布局解决方案之多列布局的更多相关文章
- DIV+CSS 网页布局之:一列布局
1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...
- DIV+CSS 网页布局之:三列布局
1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...
- DIV+CSS 网页布局之:两列布局
1.宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了. 当元素使用了浮动之后,会对周围的元素造成影响,那么就需要清除浮动,通常使用两种方法.可以 ...
- css常见的各种布局上(两列布局)
常见的布局上(两列布局) 1.常见的两列布局 1.1左边固定,右边自适应,左边宽度已知,右边默认占满整行,使用left 左浮动,右边不浮动,设置margin-left:左侧宽度 <style&g ...
- 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局
一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...
- CSS3布局篇(多列布局)
我们通过学习 CSS3,能够创建多个列来对文本进行布局 ,就像报纸那样排版那样! 可以参考详细说明:http://www.w3school.com.cn/css3/css3_multiple_colu ...
- day09—css布局解决方案之全屏布局
转行学开发,代码100天——2018-03-25 今天,本文记录全屏布局的的方法.全屏布局,即滚动条不是全局滚动条,而是出现在内容区域内,:浏览器变大时,撑满窗口. 如:设置下图中布局,其中top区, ...
- day32—CSS多列布局学习
转行学开发,代码100天——2018-04-17 关于多列布局,前期已经梳理过,今天的培训课程学习中再次提及,趁此也做个总结和检验. 多列布局的介绍参考: day08—css布局解决方案之多列布局 ...
- Css学习总结(3)——CSS布局解决方案 - 水平、垂直居中、多列布局、全屏布局
居中布局 水平居中 子元素于父元素水平居中且其(子元素与父元素)宽度均可变. inline-block + text-align <div class="parent"> ...
随机推荐
- 关于时间API
如何正确处理时间 现实生活的世界里,时间是不断向前的,如果向前追溯时间的起点,可能是宇宙出生时,又或是宇宙出现之前, 但肯定是我们目前无法找到的,我们不知道现在距离时间原点的精确距离.所以我们要表示时 ...
- linux下的SSHD被连接端口修改
连接别人:vim /etc/ssh/ssh_config 被连接: vim /etc/ssh/sshd_config 端口重启生效: /etc/init.d/sshd restart
- Mybatis-学习笔记(2)Mybatis配置文件
3>typeAliases:类型别名.2种指定方式. 1>给某个类起个别名 <typeAliases> <typeAlias type="com.lfy.b ...
- 创建Spring Boot微服务项目
创建一个测试用的微服务项目HelloWorld 创建项目 编写服务代码 @RestController public class HelloWorld { @RequestMapping(" ...
- BZOJ4990 (LCS转LIS)
题面 https://www.lydsy.com/JudgeOnline/problem.php?id=4990 分析 首先可以看出一个简单的DP dp[i][j]表示序列a前i个与序列b前j个连线数 ...
- C# asp.net XML格式的字符串显示不全
前台显示XML字符串显示不全 后台XML字符串使用<xmp></xmp>将XML格式字符串括起来
- JQ的异步文件上传
一,view代码 <form role="form"> <div class="form-group"> <label for=& ...
- MicroPython 的优势
定位的场景 MicroPython 在设计上最初就是为了嵌入式微处理器运行,例如在 nRF51822 (256kB flash + 16kB RAM) 的芯片上也可以运行起来,也有人肾得慌在 STM3 ...
- Maya2017下载安装与激活
目录 1. 更多推荐 2. 下载地址 2.1. OneDrive 2.2. 百度云 3. 安装激活步骤 1. 更多推荐 其他Maya版本的下载与激活:https://www.cnblogs.com/c ...
- CentOS7 设置电源选项,待机、睡眠、挂起
设置装有 CentOS7 的笔记本合盖后黑屏进入睡眠模式 systemd 能够处理某些电源相关的 ACPI事件,你可以通过从 /etc/systemd/logind.conf 以下选项进行配置: Ha ...