【CSS 布局】-多列布局

最新推荐文章于 2024-07-11 11:23:22 发布
最新推荐文章于 2024-07-11 11:23:22 发布
阅读量2.4k 收藏 12
点赞数 4
分类专栏： # 【CSS教程】 【前端】学习博客 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beiluoL/article/details/128966981
版权

一、两列布局

两列布局：一列定宽(也有可能由子元素决定宽度)，一列自适应的布局。

创建一个父盒子，和子盒子


<div class="container clearfix">
  <div class="left ">定宽</div>
  <div class="right ">自适应</div>
</div>

基本CSS样式如下

body {
  margin: 0;
}

.container {
  height: 50px;
  background-color: #fff;
}

.left {
  height: 50px;
  width: 200px;
  background-color: antiquewhite;
  font-size: 12px;
  line-height: 50px;
  text-align: center;
}

.right {
  height: 50px;
  background-color: azure;
  font-size: 12px;
  line-height: 50px;
}

.mt5 {
  margin-top: 5px;
}

/* 清除浮动 */
.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

1.定宽浮动: float +calc()函数

(1)左边列开启浮动

(2)右边列开启浮动

(3)右边列宽度为父级 100%减去左列的宽度


<div class="container clearfix">
  <div class="left left-float-left">定宽 float-left</div>
  <div class="right right-float-left">自适应 float-left + calc(100% - 200px)</div>
</div>

基本CSS样式如下

.left-float-left {
  float: left;
}

.right-float-left {
  /* 右边列开启浮动 */
  float: left;
  /* 宽度减去左列的宽度 */
  width: calc(100% - 200px);
}

2.定宽浮动：float + margin-left

(1)左边列开启浮动

(2)通过外边距的方式使该容器的左边有左边列容器的宽度的外边距

<!-- 2.定宽块级元素水平居中： 设置宽度，设置margin：0 auto; -->
<div class="container clearfix mt5">
  <div class="left left-float-left">定宽 float-left</div>
  <div class="right  right-margin-left">自适应 margin-left</div>
</div>

基本样式如下

.left-float-left {
  float: left;
}

/* 通过外边距的方式使该容器的左边有200px */
.right-margin-left {
  margin-left: 200px;
}

3.定宽定位 : absolute + margin-left

(1)开启定位脱离文档流

(2)通过外边距的方式使该容器的左边有左边列容器的宽度的外边距


<div class="container clearfix mt5">
  <div class="left left-position-absolute">定宽:position:absolute</div>
  <div class="right right-margin-left">自适应 margin-left</div>
</div>

css基本样式如下

.left-position-absolute {
  position: absolute;
}

.right-margin-left {
  margin-left: 200px;
}

4.浮动 :float + overflow

(1)左侧元素开始浮动

(2)右侧自适应元素设置overflow会创建一个BFC完成自适应


<div class="container clearfix mt5">
  <div class="left left-float-left">float-left</div>
  <div class="right right-overflow-hidden">overflow-hidden</div>
</div>

基本样式如下

.left-float-left {
  float: left;
}

.right-overflow-hidden {
  overflow: hidden;
}

5.flex布局 : flex-1

Flex布局通过 flex 属性实现:
flex: 1; (表示 flex-grow: 1; 即该项占所有剩余空间)


<div class="container clearfix mt5 container-flex">
  <div class="left ">left</div>
  <div class="right flex-1">flex-1</div>
</div>

基本样式如下

.container-flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

6.Grid布局 : grid-template-columns属性

Grid 布局通过template属性实现:
grid-template-columns: auto 1fr;(将其划分为两行，其中一列有本身宽度决定， 一列占剩余宽度)


<div class="container clearfix mt5  container-grid-1fr">
  <div class="left ">定宽</div>
  <div class="right ">grid</div>
</div>

基本样式如下

.container-grid-1fr {
  display: grid;
  grid-template-columns: auto 1fr;

}

二、三列布局

三列布局主要分为两种：

1.第一种:
前两列定宽，最后一列自适应，这一种本质上与两列布局没有什么区别，可以参照两列布局实现。

2.第二种 前后两列定宽，中间自适应。

创建一个父盒子，和子盒子

<!-- 解决高度塌陷 -->
<div class="container clearfix mt5">
  <div class="left ">左边</div>
  <div class="content">内容</div>
  <div class="right">右边</div>
</div>

公共的 CSS 代码如下

body {
  margin: 0;
}

.container {
  height: 50px;
  background-color: antiquewhite;
}

.left {
  height: 50px;
  width: 100px;
  background-color: azure;
}

.content {
  height: 50px;
  background-color: floralwhite;
}

.right {
  height: 50px;
  width: 100px;
  background-color: #ccc;
}

.left,
.content,
.right {
  font-size: 12px;
  line-height: 50px;
  text-align: center;
}

/* 清除浮动 */
.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.mt5 {
  margin-top: 5px;
}

1.左右浮动：float + overflow: hidden

(1)左列容器开启左浮动

(2)右列容器开启右浮动

(3)自适应元素设置overflow会创建一个BFC完成自适应

<!-- 解决高度塌陷 -->
<div class="container clearfix mt5">
  <div class="left left-float-left">左边</div>
  <div class="right right-float-right">右边</div>
  <div class="content content-overflow-hidden">内容</div>
</div>

基本样式如下

.left-float-left {
  float: left;
}

/* 自适应元素设置 overflow 会创建一个BFC 完成自适应 */
.content-overflow-hidden {
  overflow: hidden;
}

.right-float-right {
  float: right;
}

2.左右浮动：float + calc()函数

(1)左列容器开启左浮动

(2)右列容器开启右浮动

(3)使中间自适应的宽度为父级容器减去两个定宽的列

<!-- 解决高度塌陷 -->
<div class="container clearfix mt5">
  <div class="left left-float-left">左边</div>
  <div class="right right-float-right">右边</div>
  <div class="content content-width-calc">内容</div>
</div>

css样式如下

.left-float-left {
  float: left;
}

.right-float-right {
  float: right;
}

/*  使中间自适应的宽度为父级容器减去两个定宽的列 */
.content-width-calc {
  width: calc(100% - 100px);
}

3.定位: 子绝父相 + calc()函数 + margin

(1)左右两列脱离文档流，并通过偏移的方式到达自己的区域

(2)使中间自适应的宽度为父级容器减去两个定宽的列

(3)通过外边距将容器往内缩小

<!-- 解决高度塌陷 -->
<div class="container clearfix mt5 container-position-relative">
  <div class="left left-position-absolute">左边</div>
  <div class="content content-width-calc-margin">内容</div>
  <div class="right right-position-absolute">右边</div>
</div>


<!-- 解决高度塌陷 -->
<div class="container clearfix mt5 container-position-relative">
  <div class="left left-position-absolute">左边</div>
  <div class="right right-position-absolute">右边</div>
  <div class="content content-width-calc-margin">内容</div>
</div>

css样式如下

.container-position-relative {
  position: relative;
}

.left-position-absolute {
  position: absolute;
  left: 0;
  top: 0;
}

.right-position-absolute {
  position: absolute;
  right: 0;
  top: 0;
}

.content-width-calc-margin {
  width: calc(100% - 200px);
  margin-right: 100px;
  margin-left: 100px;
}

4.flex布局 : flex-1

(1)开启 Flex 布局。
(2)设置 flex 属性,flex : 1。

<!-- 解决高度塌陷 -->
<div class="container clearfix mt5 container-flex">
  <div class="left">左边</div>
  <div class="content flex-1">内容 flex-1</div>
  <div class="right ">右边</div>
</div>

css样式如下

.container-flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

5.grid布局 + grid-template-columns

(1)开启 grid布局。
(2)设置 grid 属性, grid-template-columns: auto 1fr auto;

<!-- 解决高度塌陷 -->
<div class="container clearfix mt5 container-grid-1fr">
  <div class="left">左边</div>
  <div class="content ">内容</div>
  <div class="right ">右边</div>
</div>

css样式如下


.container-grid-1fr {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

三、等分布局

等分布局就是将一个容器平均分成几等份，这里以 4 等分为例。

创建一个父盒子，和子盒子

<div class="container clearfix">
  <div class="item item1 "></div>
  <div class="item item2 "></div>
  <div class="item item3 "></div>
  <div class="item item4 "></div>
</div>

基本CSS样式如下

body {
  margin: 0;
}
.container {
  height: 50px;
  background-color: #eee;
}
.item {
  height: 100%;
}
.item1 {
  background-color: skyblue;
}
.item2 {
  background-color: deepskyblue;
}
.item3 {
  background-color: lightskyblue;
}
.item4 {
  background-color: royalblue;
}
/* 清除浮动 */
.clearfix::after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

1.浮动+百分比

开启浮动，使每个元素占25%的宽度。

<!-- 1.浮动+百分比 -->
<div class="container clearfix">
  <div class="item item1 width-25 float-left"></div>
  <div class="item item2 width-25 float-left"></div>
  <div class="item item3 width-25 float-left"></div>
  <div class="item item4 width-25 float-left"></div>
</div>

基本CSS样式如下

.width-25 {
  width: 25%;
}

.float-left {
  float: left;
}

2.行内块级 + 百分比

<!-- 行内块级元素 + 百分比 -->
<div class="container clearfix">
  <div class="item item4 width-24-5 display-inline-block"></div>
  <div class="item item3 width-24-5 display-inline-block"></div>
  <div class="item item2 width-24-5 display-inline-block"></div>
  <div class="item item1 width-24-5 display-inline-block"></div>
</div>

基本CSS样式如下

.width-24-5 {
  width: 24.5%;
}

.display-inline-block {
  display: inline-block;
}

3.flex布局

1.设置父元素相对定位 position:relative; 子元素绝对定位 position:absolute; 2.设置偏移量： left: 50%; top: 50%; 3.外边距-宽度/高度的一半将元素移动:
margin-left：- 宽度的一半 ; margin-top: 高度的一半 ;

<!-- flex -->
<div class="container clearfix display-flex">
  <div class="item item4 flex-1"></div>
  <div class="item item3 flex-1"></div>
  <div class="item item2 flex-1"></div>
  <div class="item item1 flex-1"></div>
</div>

基本CSS样式如下

.display-flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

4.grid布局

开启 grid 布局,使用 repeat 函数生成。

<!-- grid -->
<div class="container clearfix display-grid grid-template-columns-repeat">
  <div class="item item2 "></div>
  <div class="item item1 "></div>
  <div class="item item4 "></div>
  <div class="item item3 "></div>
</div>

基本CSS样式如下

.display-grid {
  display: grid;
}

.grid-template-columns-repeat {
  grid-template-columns: repeat(4, 1fr);
}
我有满天星辰
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3多列（详解网页多列布局应用）
百赢出品，必属精品
04-22 1485
CSS3 多列布局是一种用于排列文本内容的 CSS 模块，它允许开发者将文本分成多列显示，从而创建出类似于报纸、杂志等印刷媒体的布局效果。多列布局适用于需要在网页上呈现大段文本的场景，使得文本内容更具可读性和美观性。
CSS多列布局
chen'blog
07-23 373
多列布局 简单来说，多列布局就是几个元素呈现水平方式排列的效果 分类： 两列布局 等分布局 三列布局 等高布局 圣杯布局与双飞翼布局 CSS3多列布局 两列布局 一般情况下是指定宽于自适应布局，两列中左列是确认的宽度，右边是自动填满剩余所有空间的一种布局效果 定宽+自适应 实现方法 float + margin 属性配合使用 float + overflow 属性配合使用 display 属性的table 相关使用（两种方法） float + margin 利用float: left;
css_多列布局
xuchaoxin1375的博客
01-22 251
文章目录reference试验代码previewbreak-inlinehtml codecss code reference Multiple-column layout - Learn web development | MDN (mozilla.org) A basic example Styling the columns Spanning columns Columns and fragmentation 试验代码 preview break-inline html code &lt
使用 CSS 实现多列布局
最新发布
前端开发
07-11 609
使用 CSS 实现多列布局
前端学习之CSS---多列布局、响应式布局、网格布局
weixin_45258154的博客
06-12 733
瀑布流效果，网格线划分，响应式布局媒体查询
css常用布局多行多列
12-29
CSS布局常用的方法：float : none | left | right 取值： none :　默认值。对象不飘浮 left :　文本流向对象的右边 right :　文本流向对象的左边 它是怎样工作的，看个一行两列的例子 xhtml: <div id=warp> 这里是第...
Day06-CSS布局-浮动
07-10
在Web开发中，CSS布局是构建网页结构的关键技术之一，而“浮动”（Float）是CSS布局中一个重要的概念，它主要用于创建多列布局和实现图文混排效果。本篇文章将深入探讨CSS浮动的原理、用途以及如何在实践中应用。 ...
详解纯css实现瀑布流（multi-column多列及flex布局）
09-22
CSS瀑布流布局是一种网页设计布局方式，主要用于展示大量图片或内容...无论是使用multi-column多列布局还是flex布局实现瀑布流，都要求开发者对CSS布局原理有较为深入的理解，并能够熟练运用CSS属性对布局进行微调。
使用CSS3实现多列布局与多背景的技巧
12-13
多列布局CSS多列布局继承自块级布局模式，允许简单地定义多列文本。 一行太长的文字读起来很麻烦；当人眼从一行过长的文字末端移动到下一行开始处，就容易弄错到底该读哪一行。因此，为了最优化使用大的显示屏幕，...
CSS布局之多列布局
wangwangwanglichao的博客
03-31 9676
前端布局非常重要的一环就是页面框架的搭建，也是最基础的一环。在页面框架搭建之中，又有居中布局/多列布局/全局布局。本文介绍一下多列布局的一些技巧。多列布局定宽 + 自适应1.使用float + overflow：原理: 通过将左边子元素脱离文档流,设置右边子元素规定当内容溢出元素框时发生的事情以达到多列布局;用法：先将左边子元素设置为float:left;再设置右边子元素为overflow:hid...
CSS3-多列布局
GTC的博客
09-16 1714
CSS3使用columns属性定义多列布局，属性初始值根据元素个别属性而定，适用于不可替换的块元素、行内块元素、单元格，表格除外。
css 多列布局
肖皓文
12-06 360
记载几种常见的 多列布局方案 ,比较基础 不做解释 看不懂的可以参考文档属性 定宽+自适应 html结构 左侧定宽右侧自适应 消除默认padding,margin并且给左右p标签设置眼色以便区分 <div class="parent"> <div class="left"> <p>left</p> </di...
CSS 多列布局篇
い南秋乱港
07-24 113
多列布局 column ​ 1. column-count 最大列数 ​ 2. column-width 最小列宽度 ​ 3. columns 以上两个样式的合写 ​ 4. column-gap 列间距 ​ 5. column-rule 分割线样式(列与列之间) ​ 6. column-span 是否允许元素跨列显示 eg： <!DOCTYPE html> <html&g
CSS 的多列布局是什么？
Learn-anything.cn
12-10 805
一、多列布局是什么？ 就是用 CSS 的 column-count、column-width、column-gap、break-inside、page-break-inside 等实现多列显示的功能。 二、应用场景 1、文字多列显示 通过 column-count、column-gap、column-rule 就能做出下面多列显示效果。 新建 index.html 文件并复制下面代码到文件中，保存后用浏览器打开即可看效果。 <!DOCTYPE html> <html> <
css多列布局
王源偷我华子
12-14 294
两栏布局，左定右自适应 1. 利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <
CSS3 多列布局
weixin_43073401的博客
05-18 612
CSS3 多列布局是一种实现网页内容分为多个列的技术，类似于报纸或杂志的排版。它可以让网页的文本更加紧凑和易读，而不需要使用浮动或定位等复杂的布局方法。要创建CSS3多列布局，我们需要指定要添加多列效果的容器元素和容器元素的多列属性。我们还可以使用其他属性来控制多列样式和折断方式。
CSS布局--多列布局
clhdtzhh的博客
03-02 325
1、三列布局 HTML <div class="main"> <h1>Simple multicol example</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. .
CSS多列等高布局示例与技术详解
本文档主要探讨了如何使用CSS实现多列等高布局的两种方法，以便在初始列内容大小和高度不一致的情况下，创建一个视觉上统一且高度相等的布局。首先，我们将通过弹性盒子布局（Flexbox）来实现这个目标。 Flexbox...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值