Bootstrap

【CSS 布局】-多列布局

一、两列布局

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

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


<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);
}

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
@RequestParam @RequestBody @PathVariable 等参数绑定
Qt 详解QRubberBand
【家用带宽测试方法】10m宽带要多少下载速度才达标
设计WebHook
前端怎么调取后台数据？
【Python】图像批量合成视频，并以文件夹名称命名合成的视频
Golang Gin框架
TypeError: __init__() got an unexpected keyword argument ‘timestep_limit‘ 解决方案
阿里 神器 Arthas 的骚操作，定位线上BUG，超给力！
neo4j desktop基本入门
;