CSS实现三列布局

最新推荐文章于 2022-10-13 18:45:00 发布
最新推荐文章于 2022-10-13 18:45:00 发布
阅读量1.3k 收藏 5
点赞数 1
分类专栏： css布局 文章标签： 三栏布局 圣杯布局 双飞翼布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxl1990_ok/article/details/121394979
版权

左右定宽，中间自适应

先看效果图

利用float + margin

parent最小宽度不小于400px，不然子元素会换行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>float + margin</title>
    <style>
      html, body, div {
        padding: 0;
        margin: 0;
      }
      div {
        height: 500px;
      }

      .parent {
        position: relative;
      }

      .left {
        float: left;
        width: 200px;
        background: green;
      }

      .right {
        float: right;
        width: 200px;
        background: red;
      }

      .middle {
        margin-left: 200px;  /* 大于或等于左列宽度 */
        margin-right: 200px; /* 大于或等于右列宽度 */
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="left">左列定宽</div>
      <div class="right">右列定宽</div>
      <div class="middle">中间自适应</div>
    </div>
  </body>
</html>

利用绝对定位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>absolute + margin</title>
    <style>
      html, body, div {
        padding: 0;
        margin: 0;
      }
      div {
        height: 500px;
      }

      .parent {
        position: relative;
      }

      .left, .right {
        position: absolute;
        top: 0;
        width: 200px;
      }

      .left {
        left: 0;
        background: green;
      }

      .right {
        right: 0;
        background: red;
      }

      .middle {
        margin-left: 200px; /*或者parent设置 padding-left: 200px */
        margin-right: 200px; /*或者parent设置 padding-right: 200px */
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="left">左列定宽</div>
      <div class="middle">中间自适应</div>
      <div class="right">右列定宽</div>
    </div>
  </body>
</html>

 利用table实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>table</title>
    <style>
      html, body, div {
        padding: 0;
        margin: 0;
      }
      div {
        height: 500px;
      }

      .parent {
        display: table;
        width: 100%;
        table-layout: fixed;
      }
      .parent div {
        display: table-cell;
      }

      .left, .right {
        width: 200px;
      }

      .left {
        background: green;
      }

      .right {
        background: red;
      }

      .middle {
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="left">左列定宽</div>
      <div class="middle">中间自适应</div>
      <div class="right">右列定宽</div>
    </div>
  </body>
</html>

利用flex实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex</title>
    <style>
      html, body, div {
        padding: 0;
        margin: 0;
      }
      div {
        height: 500px;
      }

      .parent {
        display: flex;
        width: 100%;
      }

      .left, .right {
        width: 200px;
      }

      .left {
        background: green;
      }

      .right {
        background: red;
      }

      .middle {
        flex: 1;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="left">左列定宽</div>
      <div class="middle">中间自适应</div>
      <div class="right">右列定宽</div>
    </div>
  </body>
</html>

利用grid实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid</title>
    <style>
      html, body, div {
        padding: 0;
        margin: 0;
      }
      div {
        height: 500px;
      }

      .parent {
        display: grid;
        width: 100%;
        grid-template-columns: 200px auto 200px; /* auto 改为1fr也行*/
      }
      .left {
        background: green;
      }

      .right {
        background: red;
      }

      .middle {
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="left">左列定宽</div>
      <div class="middle">中间自适应</div>
      <div class="right">右列定宽</div>
    </div>
  </body>
</html>

圣杯布局

圣杯布局用到了浮动float、负边距、相对定位relative

html

<div class="parent">
  <div class="middle">中间内容</div>
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>

解析：

1. 先左右宽度分别为200px, 300px, 中间区域设置为100%撑满；

.parent {
    height: 200px;
}
.middle {
    width: 100px;
    background:yellow;
}
.left {
    width: 200px;
    background: green;
}
.right {
    width: 300px;
    background: red;
}

2. 三列全部设置为全浮动；

.parent div {
    height: 100%;
    float: left;
 }

  

3. left元素设置margin-left:100%;跟middle同一水平线 让left回到上一行最左侧

可以看出左侧盖在了middle中间区域上

4. right元素设置margin-left: -300px;跟middle同一水平线 让right回到上一行最右侧

 5. 给parent设置padding，给两侧留坑

现在的问题就是左右两边的元素覆盖了middle元素的内容，我们可以给容器parent加上两边padding：

.parent {
    padding: 0 300px 0 200px;  /*把两边的坑留好*/
    height: 200px;
}

 6. 设置定位

在设置了padding后，左右元素都被挤了进来，我们可以设置position:relative解决，因为浮动元素已经脱离了文档流，所以不能设置absolute。 通过设置left和right元素的相对位置，实现定位：

.left {
  width: 200px;
  background: green;
  margin-left: -100%;  /* 跟middle同一水平线 让left回到上一行最左侧*/
  position: relative;  /* 定位 */ 
  left: -200px; /*占左侧的坑*/
}

.right {
  width: 300px;
  background: red;
  margin-left: -300px; /* 跟middle同一水平线 让right回到上一行最右侧*/
  position: relative;  /* 定位 */ 
  right: -300px;  /*占右侧的坑*/
}

 

 完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" middle="width=device-width, initial-scale=1.0" />
    <title>圣杯布局</title>
    <style>
      html, body, div {
        padding: 0;
        margin: 0;
      }
      .parent {
        padding: 0 300px 0 200px;  /*把两边的坑留好*/
        height: 500px;
      }
      .parent div {
        height: 100%;
        float: left;
      }

      .middle {
        width: 100%;
        background:yellow;
      }

      .left {
        width: 200px;
        background: green;
        margin-left: -100%;  /* 跟middle同一水平线 让left回到上一行最右侧*/
        position: relative;
        left: -200px; /*占左侧的坑*/
      }

      .right {
        width: 300px;
        background: red;
        margin-left: -300px; /* 跟middle同一水平线 让right回到上一行最左侧*/
        position: relative;
        right: -300px;  /*占右侧的坑*/
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="middle">中间内容</div>
      <div class="left">左侧区域</div>
      <div class="right">右侧区域</div>
    </div>
  </body>
</html>

双飞翼布局

双飞翼布局源于淘宝的UED，可以说是灵感来自于页面渲染

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" middle="width=device-width, initial-scale=1.0" />
    <title>双飞翼布局</title>
    <style>
      html, body, div {
        padding: 0;
        margin: 0;
      }

      .parent div {
        height: 500px;
      }

      .middle {
        float: left;
        width: 100%;
      }

      .middle-content {
        margin-left: 200px;
        margin-right: 300px;
        background:yellow;
      }

      .left {
        width: 200px;
        background: green;
        float: left;
        margin-left: -100%;
      }

      .right {
        width: 300px;
        background: red;
        float: left;
        margin-left: -300px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="middle">
        <div class="middle-content">中间内容</div>
      </div>
      <div class="left">左侧区域</div>
      <div class="right">右侧区域</div>
    </div>
  </body>
</html>

对比圣杯布局和双飞翼布局：

1. 都是左右栏定宽，中间栏自适应的三栏布局，中间栏都放到文档流前面，保证先行渲染

2. 解决方案基本相似：都是三栏全部设置左浮动float：left, 设置负margin解决中间栏内容被覆盖的问题

3. 解决中间栏内容被覆盖问题时，圣杯布局设置父元素的padding,双飞翼布局在中间栏嵌套一个div,内容放到新的div中，并设置margin，实际上，双飞翼布局就是圣杯布局的改进方案

 欢迎查看其他布局系列文章

CSS实现居中布局

CSS实现两列布局

CSS实现三列布局

夜已如歌_ok
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css一行三列代码怎么写,css之页面三列布局(示例代码)
weixin_36048031的博客
08-04 2249
左右两边宽度固定，中间自适应第一种方法：左右两边绝对定位html代码css代码.left {height: 200px;width: 300px;background-color: blue;position: absolute;left:0;top:0}.right {width:300px;height: 200px;background-color: red;position: absolu...
CSS实现页面两列布局与三列布局的方法示例
09-27
本文将详细讲解如何使用CSS实现两列布局和三列布局，以及如何实现宽度和高度的自适应。 首先，我们来看一种基于BFC（块格式化上下文，Block Formatting Context）原理的三列布局方法。BFC是一个独立的渲染区域，它...
CSS div 三等分
卋舉
10-13 2048
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>div 三等分</title> <meta name="Keywords" content="关键字"&gt
如何用CSS进行网页布局-三列布局
醉月听风的博客
04-04 593
三列布局：1.左右固定中间自适应，2.左右用绝对定位position：absolute   3.左边布局left：0   右边布局right：04.中间自适应magin：上 右 下 左
CSS基本布局——grid布局
热门推荐
weixin_52148548的博客
01-06 2万+
grid布局简介： Grid布局是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。Grid比Flex布局强大。 基本概念： 容器（container）——有容器属性 项目（items）——有项目属性 行（row) 列（column） 间距（gap) ——单元格之间的距离 区域（area）—— 自己划分每个单元格占据的区域 内容（content) ...
html+css实现三列布局的4种方式
u013455430的专栏
01-14 9210
面试问到一个问题,要设计左右两边固定100px，中间自动填充，总长度为100%的一个页面 刚开始我说用栅格，实践上确实不行，所以去百度下如何实现，自己去实现了4种方式分别是：BFC块级布局，flex布局，table布局,css计算宽度布局 由于不懂BFC布局，所以在实现布局的时候走了很多弯路，一直复现失败，但后调整了html中的div顺序解决了问题，直到现在我还是不能理解这个问题，等我看懂了再...
纯CSS实现的三列布局网页效果实例
09-25
主要为大家介绍了纯CSS实现的三列布局网页效果的方法,涉及div+css网页布局涉及的相关技巧,需要的朋友可以参考下
使用CSS3实现多列布局与多背景的技巧
12-13
多列布局CSS多列布局继承自块级布局模式，允许简单地定义多列文本。 一行太长的文字读起来很麻烦；...有两个CSS属性控制是否实现多列布局和显示多少列： column-count and column-width。 属性 colum
CSS多列布局实现方法大全
09-25
本文将详细介绍四种使用CSS实现多列布局的方法，这些方法在实际项目中非常实用。 1. 使用`display: table`模拟表格布局 这种方法是通过CSS的`display`属性将元素设置为表格或表格单元格来实现多列布局。例如： ```...
CSS 三栏等高布局实现方法
09-25
CSS 三栏等高布局实现方法 CSS 三栏等高布局是指在页面中实现三个等高的栏目，每个栏目的高度可以根据内容的变化而变化。本实施方法可以将三个栏目等高地排列在一起，且不需要写死高度。 首先，需要了解三栏等高...
图解 CSS Grid 布局详解
前端蜗牛君
10-13 3786
在解释 CSS Grid 布局之前，我们先来看看 Grid 布局中一些重要概念。
css经典布局系列三——三列布局(圣杯布局、双飞翼布局)
weixin_34018202的博客
04-21 921
三列布局背景介绍 三列元素，左右元素固定宽度； 中间元素自适应； <div id="left"> left </div> <div id="middle"> middle </div> <div id="right"> right </div> 复制代码定位实现三列布局 左右两列绝对定位并且固定宽度； 中间元素自适...
css的grid布局
wanghe1111_的博客
02-15 4272
grid布局即网格布局是一种二维布局，可以同时控制行和列的排布和对齐方式，grid布局由水平线和垂直线构成，两条水平线之间的区域叫做行轨道，两条垂直线的区域叫做列轨道。
css布局-两列，左边宽度自适应，右边固定宽度200px
liona_koukou的博客
08-01 2000
&lt;style&gt; *{ margin:0; padding:0; } #box{ width:100%; height:200px; position:relative; } #left{...
css 获取table 的第几列
xuerwang的博客
08-23 7612
需求：将table列表中的第二列宽度设为300px。 说明：利用ntn-child(n)选择器进行实现。其中n代表选择元素中的第几个元素，第几个就写几，特殊的，要选中第一个可以写为： first-child ，要选中最后一个可写为，last-child，要选择偶数个，可写为nth-child(2n)，同理，奇数列可写为nth-child(2n+1)，这不仅适用于table的列，也适合于所有选中...
CSS Grid 网格布局教程
qq_39958629的博客
04-10 166
CSS网格的两个核心要素是包装器（父级）和项目（子级）。包装器是实际的网格，项目是网格中的内容。 这是其中包含六个项目的包装器的标记： <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div&gt
前端CSS（1）之两列布局和三列布局
weixin_33939843的博客
03-13 1260
  网页布局就是将网页根据不同的内容进行划分，这样做不仅可以美化网页外观，还可以让用户对你的网页功能一目了然，提升用户体验。   两列布局和三列布局是我们最常见的两种布局，我今天总结一下实现这两种布局的多种方式。本文代码没有考虑兼容性。 两列布局   侧栏宽度固定，左边内容部分宽度自适应。header和footer高度固定。 利用浮动来布局 <!DOCTYPE html> <h...
css之三列布局
coderMozart的博客
08-19 456
 要求中间宽度随窗口变化两边宽度不变    float absolute flex table grid 五种方法   具体事例      
DIV+CSS布局第一部分，一列布局，两列布局，三列布局以及组合布局举例说明
XXLoveSHT的博客
06-19 8169
DIV+CSS布局一一列布局：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;布局&lt;/title&gt; &lt;style type="text/css"&gt; body,h1{margin: 0;
css实现两行三列布局
最新发布
03-23
可以使用flex布局来实现两行三列布局，具体代码如下： HTML代码： ``` <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> ``` CSS代码： ``` .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .item { width: 30%; height: 100px; background-color: #ccc; margin-bottom: 20px; } ``` 这样就可以实现两行三列布局了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值