【CSS 布局】-多列布局

本文介绍: (2)设置 grid 属性, grid–template–columns: auto 1f r auto;两列布局：一列定宽(也有可能由子元素决定宽度)，一列自适应的布局。(2)通过外边距的方式使该容器的左边有左边列容器的宽度的外边距。(2)通过外边距的方式使该容器的左边有左边列容器的宽度的外边距。(1)左右两列脱离文档流，并通过偏移的方式到达自己的区域。(3)使中间自适应的宽度为父级容器减去两个定宽的列。(2)使中间自适应的宽度为父级容器减去两个定宽的列。(2)设置 flex 属性,fl e x : 1。

一、两列布局

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

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


&lt;div class="container clearfix"&gt;
  &lt;div class="left "&gt;定宽&lt;/div&gt;
  &lt;div class="right "&gt;自适应&lt;/div&gt;
</div&gt;

基本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 +ca lc()函数

(1)左边列开启浮动

(2)右边列开启浮动

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


<div class="container clearfix"&gt;
  <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.定宽浮动：f loat + 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.定宽定位 : abs olute + m ar gin-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.浮动 :fl oat + overflow

(1)左侧元素开始浮动

(2)右侧自适应元素设置 over flow会创建一个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:ab solute; 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);
}

原文地址:https://blog.csdn.net/beiluoL/art icle/de tails/128966981

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_45500.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

容器宽度布局

一、两列布局

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

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

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

4.浮动 :float + overflow

5.flex布局 : flex-1

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

二、三列布局

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

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

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

4.flex布局 : flex-1

5.grid布局 + grid-template–columns

三、等分布局

1.浮动+百分比

2.行内块级 + 百分比

3.flex布局

4.grid布局

相关文章

发表回复 取消回复

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

2.定宽浮动：f loat + margin-left

3.定宽定位 : abs olute + m ar gin-left

4.浮动 :fl oat + overflow

发表回复取消回复