【css】如何实现两栏布局,右侧自适应?三栏布局中间自适应呢?

一、双栏布局

双栏布局非常常见,往往是以一个定宽栏和一个自适应的栏并排展示存在

实现思路也非常的简单:

  • 使用 float 左浮左边栏
  • 右边模块使用 margin-left 撑出内容块做内容展示
  • 为父级元素添加BFC,防止下方元素飞到上方内容

代码如下:


左边
右边

还有一种更为简单的使用则是采取:flex弹性布局

flex弹性布局


左边
右边

flex可以说是最好的方案了,代码少,使用简单

注意的是,flex容器的一个默认属性值:align-items: stretch;

这个属性导致了列等高的效果。 为了让两个盒子高度自动,需要设置: align-items: flex-start

二、三栏布局

实现三栏布局中间自适应的布局方式有:

  • 两边使用 float,中间使用 margin
  • 两边使用 absolute,中间使用 margin
  • 两边使用 float 和负 margin
  • display: table 实现
  • flex实现
  • grid网格布局

两边使用 float,中间使用 margin

需要将中间的内容放在html结构最后,否则右侧会臣在中间内容的下方

实现代码如下:


左侧
右侧
中间

原理如下:

  • 两边固定宽度,中间宽度自适应。
  • 利用中间元素的margin值控制两边的间距
  • 宽度小于左右部分宽度之和时,右侧部分会被挤下去

这种实现方式存在缺陷:

  • 主体内容是最后加载的。

  • 右边在主体内容之前,如果是响应式设计,不能简单的换行展示

两边使用 absolute,中间使用 margin

基于绝对定位的三栏布局:注意绝对定位的元素脱离文档流,相对于最近的已经定位的祖先元素进行定位。无需考虑HTML中结构的顺序



左边固定宽度
右边固定宽度
中间自适应

实现流程:

  • 左右两边使用绝对定位,固定在两侧。
  • 中间占满一行,但通过 margin和左右两边留出10px的间隔

两边使用 float 和负 margin



中间自适应
左边固定宽度
右边固定宽度

实现过程:

  • 中间使用了双层标签,外层是浮动的,以便左中右能在同一行展示
  • 左边通过使用负 margin-left:-100%,相当于中间的宽度,所以向上偏移到左侧
  • 右边通过使用负 margin-left:-100px,相当于自身宽度,所以向上偏移到最右侧

缺点:

  • 增加了 .main-wrapper 一层,结构变复杂
  • 使用负 margin,调试也相对麻烦

使用 display: table 实现

 标签用于展示行列数据,不适合用于布局。但是可以使用 display: table 来实现布局的效果



左边固定宽度
中间自适应
右边固定宽度

实现原理:

  • 层通过 display: table设置为表格,设置 table-layout: fixed`表示列宽自身宽度决定,而不是自动计算。
  • 内层的左中右通过 display: table-cell设置为表格单元。
  • 左右设置固定宽度,中间设置 width: 100% 填充剩下的宽度

使用flex实现

利用flex弹性布局,可以简单实现中间自适应

代码如下:



左侧
中间
右侧

实现过程:

  • 仅需将容器设置为display:flex;
  • 盒内元素两端对其,将中间元素设置为100%宽度,或者设为flex:1,即可填充空白
  • 盒内元素的高度撑开容器的高度

优点:

  • 结构简单直观
  • 可以结合 flex的其他功能实现更多效果,例如使用 order属性调整显示顺序,让主体内容优先加载,但展示在中间

grid网格布局

代码如下:


左侧
中间
右侧

flex弹性布局一样的简单

你可能感兴趣的:(css,html,前端)