首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

一文汇总 CSS 两列布局和三列布局的具体使用

所属分类： 网页制作 / CSS 阅读数： 1933
收藏 0 赞 0 分享

前言

随着大前端的发展，UI 框架层出不穷，让我们前端开发对 CSS 的能力要求变得没那么高或者没那么严苛，起码重要性是比不上 JS 编程的。但是，基础的 CSS 依然需要我们熟练掌握，今天就来总结写下 CSS 布局的方式。

两列布局

左列定宽，右列自适应

float + margin 布局

html 代码

<body>
  <div id="left">左列定宽</div>
  <div id="right">右列自适应</div>
</body>

css 代码：

#left {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#right {
  margin-left: 200px; /* 大于或等于左列的宽度 */
  height: 400px;
  background-color: lightgreen;
}

float + overflow 布局

html 代码

<body>
  <div id="left">左列定宽</div>
  <div id="right">右列自适应</div>
</body>

css 代码

#left {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#right {
  overflow: hidden;
  height: 400px;
  background-color: lightgreen;
}

绝对定位布局

html 代码：

<body>
  <div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
  </div>
</body>

css 代码：

#parent {
  position: relative;
}
#left {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#right {
  position: absolute;
  top: 0;
  left: 200px;
  right: 0;
  height: 400px;
  background-color: lightgreen;
}

table 布局

html 代码：

<body>
  <div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
  </div>
</body>

css 代码：

#parent {
  width: 100%;
  height: 400px;
  display: table;
}
#left,
#right {
  display: table-cell;
}
#left {
  width: 200px;
  background-color: lightblue;
}
#right {
  background-color: lightgreen;
}

flex 布局

html 代码：

<body>
  <div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
  </div>
</body>

css 代码：

#parent {
  width: 100%;
  height: 400px;
  display: flex;
}
#left {
  width: 200px;
  background-color: lightblue;
}
#right {
  flex: 1;
  background-color: lightgreen;
}

grid 网格布局

html 代码：

<body>
  <div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
  </div>
</body>

css 代码：

#parent {
  width: 100%;
  height: 400px;
  display: grid;
  grid-template-columns: 200px auto;
}
#left {
  background-color: lightblue;
}
#right {
  background-color: lightgreen;
}

左列不定宽，右列自适应

左列盒子宽度随着内容增加或减少发生变化，右列盒子自适应

float + overflow 布局

html 代码：

<body>
  <div id="left">左列不定宽</div>
  <div id="right">右列自适应</div>
</body>

css 代码：

#left {
  float: left;
  height: 400px;
  background-color: lightblue;
}
#right {
  overflow: hidden;
  height: 400px;
  background-color: lightgreen;
}

flex 布局

html 代码：

<body>
  <div id="parent">
    <div id="left">左列不定宽</div>
    <div id="right">右列自适应</div>
  </div>
</body>

css 代码：

#parent {
  display: flex;
  height: 400px;
}
#left {
  background-color: lightblue;
}
#right {
  flex: 1;
  background-color: lightgreen;
}

grid 布局

html 代码：

<body>
  <div id="parent">
    <div id="left">左列不定宽</div>
    <div id="right">右列自适应</div>
  </div>
</body>

css 代码：

#parent {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 400px;
}
#left {
  background-color: lightblue;
}
#right {
  background-color: lightgreen;
}

三列布局

两列定宽，一列自适应

float + margin 布局

html 代码：

<body>
  <div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">中间列定宽</div>
    <div id="right">右列自适应</div>
  </div>
</body>

css 代码：

#parent {
  height: 400px;
}
#left {
  float: left;
  width: 100px;
  height: 400px;
  background-color: lightblue;
}
#center {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightgrey;
}
#right {
  margin-left: 300px; /* 左列的宽度 + 中间列的宽度 */
  height: 400px;
  background-color: lightgreen;
}

float + overflow 布局

html 代码：

<body>
  <div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">中间列定宽</div>
    <div id="right">右列自适应</div>
  </div>
</body>

css 代码：

#parent {
  height: 400px;
}
#left {
  float: left;
  width: 100px;
  height: 400px;
  background-color: lightblue;
}
#center {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightgrey;
}
#right {
  overflow: hidden;
  height: 400px;
  background-color: lightgreen;
}

table 布局

html 代码：

<body>
  <div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">中间列定宽</div>
    <div id="right">右列自适应</div>
  </div>
</body>

css 代码：

#parent {
  display: table;
  width: 100%;
  height: 400px;
}
#left {
  display: table-cell;
  width: 100px;
  background-color: lightblue;
}
#center {
  display: table-cell;
  width: 200px;
  background-color: lightgrey;
}
#right {
  display: table-cell;
  background-color: lightgreen;
}

flex 布局

html 代码：

<body>
  <div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">中间列定宽</div>
    <div id="right">右列自适应</div>
  </div>
</body>

css 代码：

#parent {
  display: flex;
  width: 100%;
  height: 400px;
}
#left {
  width: 100px;
  background-color: lightblue;
}
#center {
  width: 200px;
  background-color: lightgrey;
}
#right {
  flex: 1;
  background-color: lightgreen;
}

grid 布局

html 代码

<body>
  <div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">中间列定宽</div>
    <div id="right">右列自适应</div>
  </div>
</body>

css 代码

#parent {
  display: grid;
  grid-template-columns: 100px 200px auto;
  width: 100%;
  height: 400px;
}
#left {
  background-color: lightblue;
}
#center {
  background-color: lightgrey;
}
#right {
  background-color: lightgreen;
}

左右定宽，中间自适应

圣杯布局和双飞翼布局目的都是希望先加载的是中间的部分，然后再开始加载 left 和 right 两部分相对来说不是很重要的东西。

圣杯布局

圣杯布局：为了让中间的内容不被遮挡，将中间 div（或最外层父 div）设置 padding-left 和 padding-right （值等于 left 和 right 的宽度），将左右两个 div 用相对布局 position: relative 并分别配合 left 和 right 属性，以便左右两栏 div 移动后不遮挡中间 div。

html 代码：

<body>
  <div id="parent">
    <div id="center">中间列</div>
    <div id="left">左列</div>
    <div id="right">右列</div>
  </div>
</body>

css 代码：

#parent {
  height: 400px;
  padding: 0 200px;
  overflow: hidden;
}
#left,
#right {
  float: left;
  width: 200px;
  height: 100%;
  position: relative;
  background-color: lightblue;
}
#left {
  margin-left: -100%; /* 使 #left 上去一行 */
  left: -200px;
}
#right {
  right: -200px;
  margin-left: -200px; /* 使 #right 上去一行 */
}
#center {
  float: left;
  width: 100%;
  height: 100%;
  background-color: lightgrey;
}

双飞翼布局

双飞翼布局，为了中间 div 内容不被遮挡，直接在中间 div 内部创建子 div 用于放置内容，在该子 div 里用 margin-left 和 margin-right 为左右两栏 div 留出位置。

html 代码：

<body>
  <div id="parent">
    <div id="center">
      <div id="center-inside">中间列</div>
    </div>
    <div id="left">左列</div>
    <div id="right">右列</div>
  </div>
</body>

css 代码：

#left,
#right {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#left {
  margin-left: -100%; /* 使 #left 上去一行 */
}
#right {
  margin-left: -200px; /* 使 #right 上去一行 */
}
#center {
  float: left;
  width: 100%;
  height: 400px;
  background-color: lightgrey;
}
#center-inside {
  height: 100%;
  margin: 0 200px;
}

flex 实现

html 代码：

<body>
  <div id="parent">
    <div id="center">中间列</div>
    <div id="left">左列</div>
    <div id="right">右列</div>
  </div>
</body>

css 代码：

#parent {
  display: flex;
}
#left,
#right {
  flex: 0 0 200px;
  height: 400px;
  background-color: lightblue;
}
#left {
  order: -1; /* 让 #left 居于左侧 */
}
#center {
  flex: 1;
  height: 400px;
  background-color: lightgrey;
}

到此这篇关于一文汇总 CSS 两列布局和三列布局的具体使用的文章就介绍到这了,更多相关CSS 两列布局和三列布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！ 

更多精彩内容其他人还在看

CSS伪类对象before和after的用法实例详解

这两个伪类对象只有在清楚浮动clearfix的时候会用到哈，最近在研究css3的时候觉得它两个的搭配不仅能够减少代码量并且能整出很巴适的效果
收藏 0 赞 0 分享

CSS3 实用技巧：实现黑白图像效果示例代码

本文为大家详细介绍下CSS3实现黑白图像效果的具体思路及代码，感兴趣的朋友可以看下截图，希望对大家有所帮助
收藏 0 赞 0 分享

IE.JS解决IE兼容性问题方法汇总

正如标题所言它修复了许多的HTML和CSS问题，并使得透明PNG在IE5、IE6下正确显示，下面为大家介绍下具体针对不同浏览器的调用方法，感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

实现CSS3中的border-radius(边框圆角)示例代码

本文为大家详细介绍下如何实现CSS3中的border-radius(圆角)，具体代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
收藏 0 赞 0 分享

CSS line-height行高上下居中垂直居中样式属性

我们在css编写中需要对大篇幅的内容显示的更好看，有些间隔，不要在挤在一起难看，就可以使用Line-Height属性进行控制
收藏 0 赞 0 分享

CSS Float布局过程与老生常谈的三栏布局

这篇文章就是总结一下怎样使用CSS中的float属性进行布局，其实网上有很多讨论这个话题的文章了，但我觉得都没说到点子上。那就来老生常谈一次吧，CSS之Float布局
收藏 0 赞 0 分享

邮箱css加载失败怎么办 网站css加载异常原因分析

造成css加载失败的原因有很多，脚本之家也遇到过，这可能跟你代码出错，浏览器、路径、编码等等都是有关联的。所以在具体情况具体分析。下面看看具体的方案
收藏 0 赞 0 分享

CSS控制样式的三种方式(优先级对比验证)

大家都知道，CSS的中文名叫做层叠样式表，而CSS在控制样式的时候，有三种引入方式,这里简单介绍下CSS控制样式的三种方式
收藏 0 赞 0 分享

meta http-equiv="X-UA-Compatible" content="IE=7" 意思是将IE8用IE7进行渲染

X-UA-Compatible是针对ie8新加的一个设置，对于ie8之外的浏览器是不识别的，这个区别与content=
收藏 0 赞 0 分享

Discuz7.2 IE9兼容性写法 杜工完全修补方案

因为Discuz7.2在IE9浏览器中有一系列的问题，所有要在以后的开发中考虑到ie9浏览器的一些问题了，这里简单介绍下，需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22