转行学开发,代码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布局解决方案之多列布局的更多相关文章

  1. DIV+CSS 网页布局之:一列布局

    1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...

  2. DIV+CSS 网页布局之:三列布局

    1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...

  3. DIV+CSS 网页布局之:两列布局

    1.宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了. 当元素使用了浮动之后,会对周围的元素造成影响,那么就需要清除浮动,通常使用两种方法.可以 ...

  4. css常见的各种布局上(两列布局)

    常见的布局上(两列布局) 1.常见的两列布局 1.1左边固定,右边自适应,左边宽度已知,右边默认占满整行,使用left 左浮动,右边不浮动,设置margin-left:左侧宽度 <style&g ...

  5. 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局

    一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...

  6. CSS3布局篇(多列布局)

    我们通过学习 CSS3,能够创建多个列来对文本进行布局 ,就像报纸那样排版那样! 可以参考详细说明:http://www.w3school.com.cn/css3/css3_multiple_colu ...

  7. day09—css布局解决方案之全屏布局

    转行学开发,代码100天——2018-03-25 今天,本文记录全屏布局的的方法.全屏布局,即滚动条不是全局滚动条,而是出现在内容区域内,:浏览器变大时,撑满窗口. 如:设置下图中布局,其中top区, ...

  8. day32—CSS多列布局学习

    转行学开发,代码100天——2018-04-17 关于多列布局,前期已经梳理过,今天的培训课程学习中再次提及,趁此也做个总结和检验. 多列布局的介绍参考: day08—css布局解决方案之多列布局   ...

  9. Css学习总结(3)——CSS布局解决方案 - 水平、垂直居中、多列布局、全屏布局

    居中布局 水平居中 子元素于父元素水平居中且其(子元素与父元素)宽度均可变. inline-block + text-align <div class="parent"> ...

随机推荐

  1. 关于时间API

    如何正确处理时间 现实生活的世界里,时间是不断向前的,如果向前追溯时间的起点,可能是宇宙出生时,又或是宇宙出现之前, 但肯定是我们目前无法找到的,我们不知道现在距离时间原点的精确距离.所以我们要表示时 ...

  2. linux下的SSHD被连接端口修改

    连接别人:vim /etc/ssh/ssh_config 被连接: vim /etc/ssh/sshd_config 端口重启生效: /etc/init.d/sshd restart

  3. Mybatis-学习笔记(2)Mybatis配置文件

      3>typeAliases:类型别名.2种指定方式. 1>给某个类起个别名 <typeAliases> <typeAlias type="com.lfy.b ...

  4. 创建Spring Boot微服务项目

    创建一个测试用的微服务项目HelloWorld 创建项目 编写服务代码 @RestController public class HelloWorld { @RequestMapping(" ...

  5. BZOJ4990 (LCS转LIS)

    题面 https://www.lydsy.com/JudgeOnline/problem.php?id=4990 分析 首先可以看出一个简单的DP dp[i][j]表示序列a前i个与序列b前j个连线数 ...

  6. C# asp.net XML格式的字符串显示不全

    前台显示XML字符串显示不全 后台XML字符串使用<xmp></xmp>将XML格式字符串括起来

  7. JQ的异步文件上传

    一,view代码 <form role="form"> <div class="form-group"> <label for=& ...

  8. MicroPython 的优势

    定位的场景 MicroPython 在设计上最初就是为了嵌入式微处理器运行,例如在 nRF51822 (256kB flash + 16kB RAM) 的芯片上也可以运行起来,也有人肾得慌在 STM3 ...

  9. Maya2017下载安装与激活

    目录 1. 更多推荐 2. 下载地址 2.1. OneDrive 2.2. 百度云 3. 安装激活步骤 1. 更多推荐 其他Maya版本的下载与激活:https://www.cnblogs.com/c ...

  10. CentOS7 设置电源选项,待机、睡眠、挂起

    设置装有 CentOS7 的笔记本合盖后黑屏进入睡眠模式 systemd 能够处理某些电源相关的 ACPI事件,你可以通过从 /etc/systemd/logind.conf 以下选项进行配置: Ha ...