最新资讯
右div>div> 1. 通过float实现(一) 实现步骤： 为了完成效果需要调整HTML结构，调整后如下：
左div>
右div>
内容div>div> 左列容器开启左浮动 右列容器开启右浮动 自适应元素设置overflow会创建一个BFC完成自适应 实现CSS代码如下.left { /* 1. 左列容器开启左浮动 */ float: left;} .content { /* 自适应元素设置 overflow 会创建一个BFC 完成自适应 */ overflow: hidden;} .right { /* 2. 右列容器开启右浮动 */ float: right;} 2. 通过float实现(二) 实现步骤： 为了完成效果需要调整 HTML 结构，调整后如下：
左div>
右div>
内容div>div> 左列容器开启左浮动 右列容器开启右浮动 使中间自适应的宽度为父级容器减去两个定宽的列 实现CSS代码如下：.left { /* 1. 左列容器开启左浮动 */ float: left;} .content { /* 3. 使中间自适应的宽度为父级容器减去两个定宽的列 */ width: calc(100%-400px);} .right { /* 2. 右列容器开启右浮动 */ float: right;} 3. 通过position实现 实现步骤 左右两列脱离文档流，并通过偏移的方式到达自己的区域 使中间自适应的宽度为父级容器减去两个定宽的列 通过外边距将容器往内缩小 实现CSS代码如下：.left { /* 1. 左右两列脱离文档流，并通过偏移的方式到达自己的区域 */ position: absolute; left: 0; top: 0;} .content { /* 2. 使中间自适应的宽度为父级容器减去两个定宽的列 */ width: calc(100%-400px); /* 3. 通过外边距将容器往内缩小 */ margin-right: 200px; margin-left: 200px;} .right { position: absolute; right: 0; top: 0;} 4. Flex方案 通过 Flex 布局实现该功能主要是通过 flex 属性来实现。 实现CSS代码如下：.container { display: flex;} .right { flex: 1; /* flex: 1; 表示 flex-grow: 1; 即该项占所有剩余空间 */ } 5. Grid方案 通过 Grid 布局实现该功能主要是通过 template 属性实现。 实现CSS代码如下：.container { display: grid; /* 将其划分为两行，其中一列有本身宽度决定， 一列占剩余宽度*/ grid-template-columns: auto 1fr auto;} 等分布局 等分布局就是将一个容器平均分成几等份，这里以 4 等分为例，主要介绍4种方法。 公共CSS部分如下：body { margin: 0;} .container { height: 400px; background-color: #eebefa;} .item { height: 100%;} .item1 { background-color: #eccc68;} .item2 { background-color: #a6c1fa;} .item3 { background-color: #fa7d90;} .item4 { background-color: #b0ff70;} /* 清除浮动 */ .clearfix:after { content: ''; display: block; height: 0; clear: both; visibility: hidden;} 公共HTML代码如下：
div>
div>
div>
div>div> 最终的效果如下图所示： 1. 浮动+百分比方式 这种方式比较简单，开启浮动，使每个元素占25%的宽度。 实现CSS代码如下：.item { /* 开启浮动，每个元素占 25% 的宽度 */ width: 25%; float: left;} 2. 行内块级+百分比方式 这种方式与上面那种方式类似，不过需要注意的是行内块级元素有一些类似于边距的几个像素，导致各25%会超出容器。 实现CSS代码如下：.item { /* 设置每个元素为行内块级元素，每个元素占 24.5% 的宽度 */ width: 24.5%; /* 因为行内块级元素有一些类似于边距的几个像素，导致各占25会超出容器 */ display: inline-block;} 3. Flex方案 通过 Flex 布局实现该功能主要是通过 flex 属性来实现。 实现CSS代码如下：.container { /* 开启 flex 布局 */ display: flex;} .item { /* 每个元素占相同的宽度 */ flex: 1;} 4. Grid方案 通过 Grid 布局实现该功能主要是通过 template 属性实现。 实现CSS代码如下.container { /* 开启 grid 布局 */ display: grid; grid-template-columns: repeat(4, 1fr); /* 使用 repeat 函数生成如下代码 */ /* grid-template-columns: 1fr 1fr 1fr 1fr; */ } Sticky Footer布局 所谓的 Sticky Footer 布局并不是一种新的前端技术和概念，它就是一种网页布局。如果页面内容不够长时，底部栏就会固定到浏览器的底部；如果足够长时，底部栏就后跟随在内容的后面。如下图所示： 这里来介绍实现该布局的4种方式 公共的CSS代码如下：body { margin: 0;} .container { height: 400px; display: flex;} .left { height: 400px; width: 200px; background-color: #f759ab;} .content { height: 400px; background-color: #52c41a; flex: 1;} .right { height: 400px; width: 200px; background-color: #f759ab;} .left, .content, .right { font-size: 70px; line-height: 400px; text-align: center;} .header { height: 100px; background-color: #70a1ff;} .footer { height: 100px; background-color: #ff7a45;} .header, .footer { line-height: 100px; font-size: 52px; text-align: center;} 公共的HTML如下：
headerdiv>
leftdiv>
contentdiv>
rightdiv> div>