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

三个宽度不同的div并排,左右固定的

布局可以通过使用CSS的flexbox或者grid布局来实现。

  1. 使用flexbox布局: HTML代码:
代码语言:txt
复制
<div class="container">
  <div class="left">Left Content</div>
  <div class="middle">Middle Content</div>
  <div class="right">Right Content</div>
</div>

CSS代码:

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

.left {
  flex: 0 0 200px; /* 左侧固定宽度 */
}

.middle {
  flex: 1; /* 中间自适应宽度 */
}

.right {
  flex: 0 0 300px; /* 右侧固定宽度 */
}

推荐的腾讯云相关产品:腾讯云云服务器(https://cloud.tencent.com/product/cvm)

  1. 使用grid布局: HTML代码:
代码语言:txt
复制
<div class="container">
  <div class="left">Left Content</div>
  <div class="middle">Middle Content</div>
  <div class="right">Right Content</div>
</div>

CSS代码:

代码语言:txt
复制
.container {
  display: grid;
  grid-template-columns: 200px 1fr 300px; /* 左中右三列的宽度比例 */
}

.left {
  /* 左侧固定宽度 */
}

.middle {
  /* 中间自适应宽度 */
}

.right {
  /* 右侧固定宽度 */
}

推荐的腾讯云相关产品:腾讯云云服务器(https://cloud.tencent.com/product/cvm)

以上是实现三个宽度不同的div并排,左右固定的布局的方法,可以根据具体需求选择使用flexbox布局或grid布局。

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

相关·内容

  • 关于Div的宽度与高度的100%设定

    正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?...其实,要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的,只需弄懂一个简单的问题就可以了,即100%的基数是谁,就是这个100%是相对于谁的width、height来说是...div的100%是从其上一级div的宽高继承来的,有一点很关键,就是要设置div100%显示,必须设置其上一级div的宽度或高度,否则无效。...你设div的高度为100%,那么它是和什么地方相对为100%? 前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度。...style="width:100%; height:100%; background-color:#666; z-index:1"> div> 有一点需要注意的是,Html级元素默认宽度是100%

    3.9K20

    圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例

    题目要求:针对如下DOM结构,编写CSS,实现三栏水平布局,其中left、right分别位于左右两侧,left宽度为200px,right宽度为300px,main处在中间,宽度自适应。...="right">rightdiv> div>    圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局(想象一下圣杯是主体是加上两个耳朵;鸟儿是身体加上一对翅膀),...让其跟中间栏div并排,以形成三栏布局。...不同在于解决 “中间栏div内容不被遮挡”问题的思路不一样。   ....main{ flex-grow:1; background-color: blue; } 5.通过项目属性flex-basis 设置left和right的固定宽度 .left{ order: -1;

    1K20

    第3章 | 基本数据类型 | 3.1 固定宽度的述职类型

    ) -> bool 函数指针 str::is_empty (闭包类型没有显式书写形式) 闭包 ... 3.1 固定宽度的数值类型 Rust 类型系统的根基是一组固定宽度的数值类型,选用这些类型是为了匹配几乎所有现代处理器都已直接在硬件中实现的类型...固定宽度的数值类型可能会溢出或丢失精度,但它们足以满足大多数应用程序的需求,并且要比任意精度整数和精确有理数等表示法快数千倍。...Rust 中数值类型的名称都遵循着一种统一的模式,也就是以“位”数表明它们的宽度,以前缀表明它们的用法,如表 3-2 所示。...((-128_i8).checked_div(-1), None); 回绕运算会返回与“数学意义上正确的结果”对“值类型范围”取模的值相等的值。...——译者注 2饱和是对溢出的一种补救方式,余数不可能溢出,因此饱和也没有意义。——译者注 3饱和是对溢出的一种补救方式,移位的溢出在不同情况下补救方式不同,因此无法统一支持。

    13510

    img固定宽度和高度,不规则图片变形问题的解决方法

    前端又要去做适应,是一个让人非常头大的问题。 总结了一个不规则图片不变形的解决方案: 注:先写一个长 300px 宽 200px 带边框的 div ,图片接近方形,实现图片正常显示不变形。...div class="box box1">     ... div> 1、背景图法 通过背景图的 background-position 属性,可以使图片居中显示。...2、object-fit object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框,不支持IE。...var img = document.getimgmentById("img"); var div = document.getimgmentById("div"); img.onload = function...1px solid red; } ul li img {     max-height: 100%;     max-width: 100%; } 声明:本文由w3h5原创,转载请注明出处:《img固定宽度和高度

    10.4K20

    js 实现上下改变父 div 的高度,左右上下动态分割孩子的宽高

    需求 实现父 div 里面 左右,上下动态分割 div,并上下改变父 div 的高度,并且宽和高都是按百分比(如图) 。 ? 2....div class="arrow">div> div> 每一个横向的 div 为 hj-transverse-split-div 并相对定位,里面有一个拖动改变左右的 label 为...拖动改变左右的 label 时,向左时,label 的父 div 的宽变小,label 的父 div 相邻的 右边的 div 宽度变大。...">下div> div class="arrow">div> div> 每一个横向的 div 为 hj-vertical-split-div 并相对定位,里面有一个拖动改变左右的...拖动改变上下的 label 时,向上时,label 的父 div 的高度变小,label 的父 div 相邻的下边的 div 高度变大。

    10K30

    前端入门4-CSS属性样式表声明正文-CSS属性样式表

    比如:100px 200px,-50px -120px background-position: 描述左右的词 描述上下的词; 描述左右的词:left、center、right 描述上下的词:top 、...但对于块级元素,浏览器会强制让其霸占一整行,也就是这一行内,只能有这个块级元素存在,其他元素不能与其并排。如果没有设置宽度,那么就是充满整行。...本质上也是clear:both) 浮动的不足 浮动虽然好用,既可以实现文字围绕的效果,又可以实现多列并排的布局,但它也存在一些不足的地方,上面说的浮动清除是其中一点,还有一些问题,如下: 整个宽度可能难以计算...​ 这是因为多个浮动元素之间并排显示的前提的有足够的空间让这些元素并排,所以通常对于浮动元素的宽度设置是通过百分比来设置,确保多个并排的元素即使窗口发生变化仍旧可以并排布局。 ​...9.位置 position position 属性值有三个:absolute, relative, fixed 三种虽然是不同的定位模式,但其实说白了,就是参考点不同。

    1.6K30

    跨浏览器获取不同环境的window窗口宽度和高度

    窗口大小 跨浏览器确定一个窗口的大小不是一件容易的事。...在IE9+、Safari和Firefox中,outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸(无论是从最外层的window对象还是从某个框架访问)。...在Opera中,这两个属性的值表示页面视图容器的大小。而 innerWidth 和 innerHeight 则表示该容器中页面视图区的大小(减去边框宽度)。...IE8及更早版本没有提供取得当前浏览器窗口尺寸的属性,不过它通过DOM提供了页面可见区域的相关信息。...而对于混杂模式下的Chrome,则无论通过 document.documentElement 还是 document.body 中的 clientWidth和clientHeight 属性,都可以取得视口的大小

    2.7K10

    【Web前端】项目实训:CSS基本布局理解

    要求使用 栅格布局 来分割页面,顶部导航栏固定在顶部,内容区域左右分栏。 代码示例: 左右两栏,第三行是页脚。通过 ​​grid-template-areas​​ 确定每个区域的布局位置。...页脚:​​footer​​ 固定在页面底部,跨越整个页面宽度,并居中显示内容。 响应式设计:通过 ​​grid​​​ 的灵活性,你可以轻松扩展布局,适应不同屏幕大小。...浮动布局的使用:底部的推荐产品区域采用浮动布局,每个推荐产品使用 ​​float: left​​ 并设置固定宽度,使它们并排排列。同时使用 ​​overflow: hidden​​ 清除浮动。...当屏幕宽度小于 768px 时,产品图片和描述区垂直排列,推荐产品区域的每个项目宽度为 100%。

    12410

    生化小课 | 生物属于生命的三个不同领域

    生化小课 医学生:生理生化 必有一挂 生科/生技:生化书是我见过最厚的教材 没有之一 每周一堂 生化小课 —— 期末/考研 逢考必过—— 生物属于生命的三个不同领域 ✦ 快速而价格低廉地确定DNA...序列技术的发展,大大提高了我们推断生物之间进化关系的能力。...各种生物基因序列之间的相似性为深入了解进化过程提供了依据。 在对序列相似性的一种解释中,所有生物都属于三个大的类群(领域)之一,这三个类群(领域)定义了起源于一个共同祖先的生命进化树的三个分支。...所有真核生物,即构成第三个领域的真核生物(Eukarya),都是从产生古菌的同一个分支进化而来的;因此,真核生物与古菌的关系比与细菌的关系更密切。...三大生命领域的系统发育 在古菌和细菌的领域内,是以其栖息地区分的亚群。 在氧气充足的有氧环境中,一些常驻生物通过将电子从燃料分子转移到细胞内的氧气中获取能量。

    90220
    领券