首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS 3列布局,包含2个固定列和1个主中心列

CSS 3列布局是一种常用的网页布局方式,它包含2个固定列和1个主中心列。这种布局方式可以实现多种网页设计需求,如导航栏、侧边栏和内容区域的布局。

在CSS中,可以使用flexbox或grid布局来实现3列布局。以下是一种常见的实现方式:

HTML结构:

代码语言:html
复制
<div class="container">
  <div class="sidebar">固定列1</div>
  <div class="main">主中心列</div>
  <div class="sidebar">固定列2</div>
</div>

CSS样式:

代码语言:css
复制
.container {
  display: flex;
}

.sidebar {
  width: 200px;
  background-color: #f1f1f1;
}

.main {
  flex-grow: 1;
  background-color: #fff;
}

上述代码中,.container是包含3列的容器,使用display: flex将其设置为弹性布局。.sidebar表示固定列,可以根据需要设置宽度和背景颜色。.main表示主中心列,使用flex-grow: 1将其设置为自动填充剩余空间。

这种3列布局适用于各种网页设计场景,如博客、新闻网站、企业官网等。固定列可以用于显示导航菜单、广告栏、社交媒体链接等内容,主中心列用于展示主要内容。

腾讯云提供了一系列云计算相关产品,其中与网页布局相关的产品包括云服务器(ECS)、云存储(COS)和内容分发网络(CDN)。您可以根据具体需求选择适合的产品,详情请参考腾讯云官方文档:

以上是关于CSS 3列布局的完善且全面的答案。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端|Bootstrap的栅格系统

栅格系统所谓的栅格就是小时候练字的方格本子是非常相似的。但栅格系统也有它的特别之处,它的大小并不是固定的。...它会随着页面的大小比例随之改变,就像最开始学习网页的布局一样,并不是定宽定长的,网页里的百分比布局是比较相似的。这样,栅格系统就能够与更多的移动设备相匹配。...下面就介绍一下 Bootstrap 栅格系统的工作原理: “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列...结语 今天学习了栅格系统的原理,对栅格系统有了初步的了解认识。但在实际运用的时候还需要对bootstrap框架的源码进行一些学习,特别是其中css的部分,对于布局来说是非常重要的。...END 编 | 王文星 责 编 | 桂 军 where2go 团队

1.4K10

响应式设计

移动端布局一般是很朴素的设计。除了前面提到的交互菜单,移动版设计主要关注的是内容。在大屏上,可以把页面的大块区域拿来做头部、图、菜单。然而在移动设备上,用户通常有更明确的目标。...做响应式设计时,一定要确保 HTML 包含了各种屏幕尺寸所需的全部内容。你可以对每个屏幕尺寸应用不同的 CSS,但是它们必须共享同一份 HTML。...# 流式布局 流式布局,有时被称作液体布局(liquid layout),指的是使用的容器随视口宽度而变化。它跟固定布局相反,固定布局都是用 px 或者 em 单位定义。...在容器中,任何都用百分比来定义宽度(比如,宽 70%,侧边栏宽 30%)。这样无论屏幕宽度是多少都能放得下容器。...用 Flexbox 布局也可以,设置弹性元素的 flex-grow flex-shrink(更重要),让元素能够始终填满屏幕。要习惯将容器宽度设置为百分比,而不是任何固定的值。

2K10

几种常见的CSS布局

,旁边两侧固定宽度 1.圣杯布局 ① 特点 比较特殊的三栏布局,同样也是两边固定宽度,中间自适应,唯一区别是dom结构必须是先写中间部分,这样实现中间可以优先加载。...3.两种布局实现方式对比: 两种布局方式都是把放在文档流最前面,使优先加载。 两种布局方式在实现上也有相同之处,都是让三浮动,然后通过负外边距形成三布局。...两种布局方式的不同之处在于如何处理中间的位置: 圣杯布局是利用父容器的左、右内边距+两个从相对定位; 双飞翼布局是把嵌套在一个新的父级块中利用的左、右外边距进行布局调整 四、等高布局 等高布局是指子元素在父元素中高度相等的布局方式...参考文章 双飞翼布局介绍-始于淘宝UED CSS三栏布局的四种方法 CSS布局---左侧固定,右侧自适应 两自适应布局的四种思路 css常见布局之九:三栏布局的常见实现 【布局】聊聊为什么淘宝要提出...「双飞翼」布局 CSS的单列布局与二&三布局

87720

几种常见的 CSS 布局

,旁边两侧固定宽度 1.圣杯布局 ① 特点 比较特殊的三栏布局,同样也是两边固定宽度,中间自适应,唯一区别是dom结构必须是先写中间部分,这样实现中间可以优先加载。...3.两种布局实现方式对比: 两种布局方式都是把放在文档流最前面,使优先加载。 两种布局方式在实现上也有相同之处,都是让三浮动,然后通过负外边距形成三布局。...两种布局方式的不同之处在于如何处理中间的位置: 圣杯布局是利用父容器的左、右内边距+两个从相对定位; 双飞翼布局是把嵌套在一个新的父级块中利用的左、右外边距进行布局调整 四、等高布局 等高布局是指子元素在父元素中高度相等的布局方式...参考文章 双飞翼布局介绍-始于淘宝UED CSS三栏布局的四种方法 CSS布局---左侧固定,右侧自适应 两自适应布局的四种思路 css常见布局之九:三栏布局的常见实现 【布局】聊聊为什么淘宝要提出...「双飞翼」布局 CSS的单列布局与二&三布局 推荐阅读: 1.

90520

不可忽视的CSS布局

前言 CSS布局是一个前端必备的技能,HTML如果说是结构之美,CSS就是视觉之美可以给用户不一样的体验的效果视觉冲击。...随着现在设备种类的增多,各种大小不一,奇形怪状的设备使得前端开发的压力不断增大,越来越多的UI框架层出不群,我们就会忽略了最基本的CSS,下面总结了一些经常用到的CSS布局,一起学习进步。...两布局布局将页面分割成左右宽度不一样的两部分,一般情况下都是左边宽度固定,右边宽度撑满剩余宽度,常用于api网站后台管理系统。...三布局布局是将页面分为左中右水平方向的三个部分比如github。也有可能是水平方向上的两布局中右边撑满的部分嵌套一个两布局组成。...圣杯双飞翼的区别 还有一种布局是垂直方向上的分为上中下三个部分,上下两部分固定高度,中间部分高度不定,当页面高度小于浏览器高度时,下部分应该固定在浏览器的底部,但是当页面的高度超出浏览器高度的时候,

58310

「Shiny」应用程序布局指南

侧边栏布局 侧边栏布局是许多应用非常有用的起点。该布局提供了一个侧边栏用于放置输入控件一个大的区域放置输出控件。 ?...Fluid 网格系统 Bootstrap网格系统采用12,可以灵活地细分为行。要基于 fluid 系统创建布局,请使用fluidPage() 函数。...固定网格系统 固定网格系统也使用12,并在默认情况下保持940像素的固定宽度。...下面是一个fixedRow(),它的宽度为9,其中包含另外两,宽度分别为63: ?...响应布局 Bootstrap 网格系统支持响应式CSS,它使您的应用程序能够自动调整其布局,以在不同大小的设备上查看。响应式布局包括以下内容: 修改网格宽。 在必要之处堆砌而不是浮动组件。

7K32

bootstrap容器

Bootstrap是一个流行的前端开发框架,提供了丰富的CSSJavaScript组件,用于构建响应式现代化的Web应用程序。...其中,容器(Container)是Bootstrap中的一个重要组件,用于创建响应式布局页面内容的容器。...响应式布局Bootstrap的容器组件还提供了响应式布局的支持,可以根据不同的屏幕尺寸调整容器的布局样式。Bootstrap使用CSS的媒体查询(media query)来实现响应式布局。...然后,我们使用创建了一个行(Row),并在行内创建了两个(Column)。每个都使用col-sm-6类,表示在小型屏幕上(如平板电脑)将占据一半的宽度。...这意味着在较小的屏幕上,左侧右侧内容将分别在一行中显示。通过使用不同的col-类媒体查询,我们可以根据需要在不同屏幕尺寸下创建不同的布局

1K30

CSS布局(一)

CSS布局(一) 看面试题,看到两个没听说过的布局圣杯布局、双飞翼布局。这就来学习一波CSS布局。...双栏布局 双栏布局是一种非常使用的布局。左边是目录、公告等内容,右边是内容。 双栏布局的侧边栏部分通常都是放目录、公告等需要稳定表现的内容,所以侧边栏需要固定,然后让内容自适应。...首先第一设置为 auto,即会根据子元素宽度来设置,而子元素的宽度已经设置为 200px了,所以第一就是 200px,而第二的 1fr则是占满剩余空间。...(没学过grid,推测的结果,不对请指正) 三栏布局 两边的侧边栏固定宽度,中间的内容自适应宽度。 比较有名的有圣杯布局、双飞翼布局两种。 圣杯布局 圣杯布局是比较特殊的三栏布局。...常用布局介绍:单栏双栏,圣杯,双飞翼/附各类居中技巧 几种常见的CSS布局

1.3K10

HTMLCSS 常见面试题汇总

IE的宽度高度还包含了 padding border ; 设置行内元素的宽高:在 Standars 模式下,给等行内元素设置 width height 都不会生效,而 Quirks...的缩写,指向网络资源所在的位置,建立当前元素(锚点)或当前文档之间的链接; CSS面试题 1、谈谈你对CSS布局的理解 常见的布局方式:固定布局、流式布局、弹性布局、浮动布局、定位布局、margin...9、请写出多种等高布局 假等高布局:使用背景图片,在的父元素上使用这个背景图进行Y轴的铺放,从而实现一种等高的假象 给容器div使用单独的背景色(固定布局、流体布局):用元素中的最大高度撑大其他的容器高度...创建带边框的两等高布局:用border-left来做,只能使用两 使用正padding负margin对冲实现多布局方法:在所有中使用正的上下padding负的上下margin,并在所有外面加上一个容器...,设置overflow:hidden把溢出背景切掉 使用边框定位模拟等高:但不能使用在多 模拟表格布局等高效果:兼容性不好,在IE6/7无法正常运行 10、在CSS样式中使用px、em,各有什么优势

1.6K20

如何使用FlexboxCSS Grid,实现高效布局

在不久的将来,当 CSS Grid 布局获得完整的浏览器支持时,设计人员就能够利用每个 CSS 组合的优势,来创建最有效最有趣的布局设计。...下面是需要创建的内容: 要完成这个基本布局, Flexbox 需要完成的主要任务包括以下方面: 创建完整宽度的 header footer 将侧边栏放置在内容区域左侧 确保侧边栏内容区域的大小合适...CSS Grid 创建布局 最后,我们通过组合 Flexbox CSS Grid 来创建更复杂的布局。...基本的布局如下图所示: 这种布局需要在行两个方向上保持一致,所以使用 CSS Grid 实现整体布局十分有效。 规划对于布局的实现来说,十分重要。 接下来看看代码如何一步步实现。...带有文本按钮的行内容 下图是包含了“额外”文本按钮的三个区域。Flexbox 可以轻松设置三的宽度。

3.4K10

CSS Flexbox 布局完全指南 (二):3000字,多示例讲解

: 中间的那 article 应该在 nav aside 两个侧边栏之前显示出来。...在之前的解决方案中,header footer 都有一个固定的高度,接下来再通过同样的方法计算 main 的高度。...你可以在这里查看最终效果: https://codepen.io/ohansemmanuel/full/brzybZ/ 两网页布局布局很常见,这也可以用 Flexbox 轻松实现。 ?...包含边栏内容的两布局 看下以下标识文本: sidebar main 先建一个 Flexbox 格式文本: body...改变默认布局方向,得到 3 个子元素(即 flex-items) 第四步 给元素 1 元素 3 一个固定的高度 height: 50px。 第五步 元素 2 要有一个填满可用空间的高度。

1.9K20

css布局 - 两栏自适应布局的几种实现方法汇总

float:left 需要自适应的文案margin-right等于固定宽度的图片宽度+二者间距 有固定宽度的图片,margin-left负边距为自己的宽度。... css: /*不好意系,可以6到不用css*/ 哈哈哈~ table布局实现关键点解析 结构放到tbale中 两分别放到两个td中,固宽的td...父元素display:table;(自己测试不设置这一条也可以) 两都设置display:table-cell;[w3c:此元素会作为一个表格单元格显示(类似td th)] 别忘了两之间的间隙...七、固定宽度+inline-block普通不一定普通 如果是pc端非自适应的布局,那么固定宽度也未尝不是一个好方法。 ?...另外,css真的相当灵活有趣,每一个方法中css的属性不一定非要是我列举的这几条。 比如absolutefloat的txt里边,就有好几种写法可以解决。任选其一就好。

1.8K20

使用内联的 CSS 变量技巧,提高灵巧布局效率!

作者:Ahmad shaded 译者:前端小智 来源:sitepoint 有些情况下,我需要用一种简单的方法来创建网格布局。 例如,每次我改变主意时,在不修改CSS的情况下快速画出五网格。...CSS网格示例 侧边栏内容 ? 在此设计中,我将CSS网格用于以下各项: 边栏主菜单 表单项 三布局 侧边栏的宽度是固定的,内容是变化。假设侧边栏的宽度是240px。...三布局 在下面的示例中,我添加了--repeat-number:3--gap:8px作为内联CSS。 这些变量将添加到o-grid类,网格的设置将基于这些变量。...Flexbox示例 在示例中,有一个文章标题,其中包含作者姓名标签。 这些在页面中的排布方式是动态变化,所以需要一种快速切换这些布局方式的方法 。...按钮 按钮宽度 CSS 变量也适用于按钮元素。 假设有一个带有两个input字段一个按钮的表单。 ? 我的目的是通过使用内联CSS变量来控制按钮的宽度。 有时,按钮应占据其父控件的100%宽度。

3.3K10

网页布局基础

倡导的是结构、样式、行为分离 3.盒模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计布局时使用。...5.浮动布局 CSS中规定的第二种定位机制,使用浮动布局能够实现块级元素的横向排版,即横向多布局。...10.绝对定位布局 绝对定位布局就是使用position属性实现的网页布局,是CSS中规定的第三种定位机制。它除了能实现横向多布局以外,还可以实现许多复杂的定位,例如: 带有遮罩层效果的提示框 ?...使用绝对定位ablolute实现横向两布局 — 常用于一固定宽度,另一宽度自适应的情况 主要应用技能: relative—父元素相对定位 absolute—自适应宽度的元素绝对定位 注意:固定宽度的高度...>自适应宽度的(因为绝对定位的元素会导致父元素高度塌陷,所以一定要保证固定宽度的高度>自适应宽度的,才能让绝对定位元素放进父容器里)

1.8K20

8个硬核技巧带你迅速提升CSS技术

div { overflow: hidden; height: 100%; } 多布局布局 经典的「两布局」由左右两组成,其特点为一宽度固定、另一宽度自适应和两高度固定且相等...经典的「三布局」由左中右三组成,其特点为连续两宽度固定、剩余一宽度自适应和三高度固定且相等。...以下以左中宽度固定宽度自适应为例,反之同理。整体的实现原理与上述两布局一致。 ?...经典的「圣杯布局「双飞翼布局」都是由左中右三组成,其特点为左右两宽度固定、中间一宽度自适应和三高度固定且相等。...经典的「均分布局」由多组成,其特点为每宽度相等高度固定且相等。

2.7K30

从零开始学 Web 之 移动Web(七)Bootstrap

Framework7 主要的作用就是让你有机会能够使用 HTML,CSS JavaScript 简单明了地开发 iOS Android 应用。...二、bootstrap Bootstrap是当前最流行的前端UI框架(有预制界面组件) Bootstrap 是最受欢迎的 HTML、CSS JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目...Bootstrap是基于HTML5CSS3开发的,它在jQuery的基础上进行了更为个性化人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。...1、.container 实现固定宽度并支持响应式布局的容器。...“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)内补(padding)。

5.6K30
领券