CSS布局基础：两列 or 三列自适应

hatlonely 发布于2019-08-29 12:22 / 3310人阅读

【第一列或某两列固定宽度，最后一列占据页面剩余宽度（即宽度自适应）】

写这篇文章主要是为了解决一个实际遇到的问题：
左右两列布局，左侧宽度固定，右侧宽度自适应（或左中右三列布局，左侧和中间宽度固定，右侧宽度自适应），当页面宽度变化时，怎样使右侧元素中的内容始终在页面剩余宽度中居中显示，将右侧元素设置了text-align: center;之后，问题其实也就是怎样让右侧元素的宽度占据页面剩余所有宽度。

基础知识：元素float之后的变化

1.原本为inline或原本为block的元素，设置了float: left 或 float: right之后，会变得具有inline-block元素的特性，即：不独占一行，且可以设置宽和高。
2.与position:absolute;的脱离文档流不同的是：float的几个元素，它们在同一个文档流中。
3.float半脱离文档流：两个元素中的前一个设置了float:left;，对于后续元素的元素来说，前一个元素是脱离文档流的，也就是会占据元素的位置；对于后续元素的内容来说，前一个元素又是占据文档流的，也就是不会覆盖前一个元素的内容。如图所示：

方法一： float + calc()

//html

    left
    我要居中
center

//css
.wrap {
  width: 500px;
  background: yellow;
  overflow: hidden;
}
.left {
  float:left;
  width: 100px;
  background: blue;
}
.right{
  float:left;
  background: red;
  text-align:center;
}

如果我们仅仅这样写，那么效果会像下图这样：

可以看到右侧元素的宽度并不是页面剩余宽度。原因是：右侧元素float之后具有了行内块级元素的特性，即宽度为auto。所以无法占满剩余宽度。

这不是我们想要的结果，所以我们要自己设置右侧元素的宽度：

.right {
    width: calc(100% - 100px);
}

就符合我们的要求了：

方法二：position / float + margin-left

//html部分同上
//css
.wrap {
  position: relative;
  width: 500px;
  background: yellow;
}
.left {
  position:absolute;
  left: 0; /*或 float:left; */
  width: 100px;
  background: blue;
}
.right{
  margin-left: 100px;
  background: red;
  text-align:center;
}

原理是：左侧元素float: left或者设置position: absolute 之后脱离了文档流，右侧其实依然是一个霸道的独占一行的块级元素（block），设置margin-left为左侧元素宽度之后，看起来就像是两个元素在同一行，且右侧元素宽度自适应啦：

方法三：及其方便的flex

.content {
  width: 500px;
  background: blue;
  display: flex;
}
.left {
  background: pink;
  width: 100px;
}
.right {
  background: yellow;
  text-align: center;
  flex: auto;
}

参考资料：
http://www.imooc.com/video/774/0

云服务器 GPU云服务器右列自适应 extjs三列式布局 css自适应 css图片自适应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111845.html

CSS布局基础：两列 or 三列自适应

【第一列或某两列固定宽度，最后一列占据页面剩余宽度（即宽度自适应）】写这篇文章主要是为了解决一个实际遇到的问题：左右两列布局，左侧宽度固定，右侧宽度自适应（或左中右三列布局，左侧和中间宽度固定，右侧宽度自适应），当页面宽度变化时，怎样使右侧元素中的内容始终在页面剩余宽度中居中显示，将右侧元素设置了text-align: center;之后，问题其实也就是怎样让右侧元素的宽度占据页面剩余所有宽度。...

melody_lql 2019-08-01 16:38 评论0 收藏0
css中的那些布局

摘要：张鑫旭老师的博客是左边流式布局，右边固定宽度左浮动因为浮动会导致元素脱离文档流，所以下面的元素会占据浮动元素原来的位置。代码左浮动实现两列布局绝对定位实现两列布局这个原理类似浮动，因为绝对定位会脱离文档流，只需要设置右的就能实现布局。因为最近心血来潮，就总结了一下css中的几种常见的多列布局。两列自适应布局两列自适应布局算是css布局里面最基础的一种布局了，不少网站在使用。这...

liangzai_cool 2019-08-29 11:00 评论0 收藏0
css中的那些布局

摘要：张鑫旭老师的博客是左边流式布局，右边固定宽度左浮动因为浮动会导致元素脱离文档流，所以下面的元素会占据浮动元素原来的位置。代码左浮动实现两列布局绝对定位实现两列布局这个原理类似浮动，因为绝对定位会脱离文档流，只需要设置右的就能实现布局。因为最近心血来潮，就总结了一下css中的几种常见的多列布局。两列自适应布局两列自适应布局算是css布局里面最基础的一种布局了，不少网站在使用。这...

phodal 2019-08-01 15:30 评论0 收藏0
html 三列布局（两列自适应，一列固定宽度）

摘要：不做过多解释主要是记录一个完整的布局样式，实现页面大致三列其中左右两列是自适应宽度，中间固定宽度效果。不做过多解释：主要是记录一个完整的布局样式，实现页面大致三列其中左右两列是自适应宽度，中间固定宽度效果。不多少代码奉上： CSS样式代码： /******************** *公共标签样式 ********************/ /********************...

ranwu 2019-04-23 13:29 评论0 收藏0
几种常见的CSS布局

摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。本文概要本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

FuisonDesign 2019-08-23 12:57 评论0 收藏0