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

如何将2x2表中的div设置为等于行中最高div的高度?

要将2x2表中的div设置为等于行中最高div的高度,可以使用CSS的flexbox布局来实现。

首先,将表格的容器设置为flex布局,可以通过设置display属性为flex来实现。例如:

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

接下来,将每个单元格的容器设置为flex子项,并且设置flex-direction为column,使得每个单元格内的div垂直排列。例如:

代码语言:txt
复制
.table-cell {
  display: flex;
  flex-direction: column;
}

然后,将每个单元格内的div设置为flex子项,并且设置flex-grow属性为1,使得每个div都能平分单元格的高度。例如:

代码语言:txt
复制
.table-cell div {
  flex-grow: 1;
}

最后,使用JavaScript来获取每行中最高的div高度,并将其他div的高度设置为最高div的高度。可以通过遍历每行的div元素,获取其最大高度,然后将其他div的高度设置为最大高度。例如:

代码语言:txt
复制
var rows = document.getElementsByClassName('table-row');
for (var i = 0; i < rows.length; i++) {
  var divs = rows[i].getElementsByClassName('table-cell');
  var maxHeight = 0;
  for (var j = 0; j < divs.length; j++) {
    maxHeight = Math.max(maxHeight, divs[j].offsetHeight);
  }
  for (var j = 0; j < divs.length; j++) {
    divs[j].style.height = maxHeight + 'px';
  }
}

这样,就能实现将2x2表中的div设置为等于行中最高div的高度。

关于腾讯云相关产品和产品介绍链接地址,可以根据具体需求选择适合的产品,例如云服务器、云数据库、云存储等。具体的产品介绍和链接地址可以在腾讯云官网上查找。

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

相关·内容

盒模型

box-sizing 默认值 content-box,这意味任何指定宽或高都只会设置内容盒子大小。...普通文档流是限定宽度和无限高度设计。...使用百分比高度是想让一个容器填满屏幕。不过更好方式是用视口相对单位 vh,100vh 等于视口高度。...容器里面的内容只有一文字吗? 设置一个大高,让它等于理想容器高度。这样会让容器高度扩展到能够容纳高。如果内容不是行内元素,可以设置inline-block。 不知道内部元素高度?...这是用户代理样式添加,但当前后叠放两个段落时,它们外边距不会相加产生一个 2em 间距,而会折叠,只产生 1em 间隔。 折叠外边距大小等于相邻外边距最大值。

1.8K20

CSS 相对单位

# 相对值优势 CSS 网页带来了后期绑定(late-binding)样式:直到内容和样式都完成了,二者才会结合起来。这会给设计流程增加复杂性,而这在其他类型图形设计是不存在。...在 CSS ,1em 等于当前元素字号,其准确值取决于作用元素。 浏览器会根据相对单位值计算出绝对值,称作计算值(computed value)。...# 设置一个合理默认字号 如果你希望默认字号为 14px,那么不要将默认字体设置 10px 然后再覆盖一遍,而应该直接将根元素字号设置想要值。...视口相对单位 vh: 视口高度 1/100 vw:视口宽度 1/100 vmin:视口宽、高中较小一方 1/100(IE9 叫 vm,而不是 vmin) vmax:视口宽、高中较大一方...可以用一个无单位数值给 body 设置高,之后就不用修改了,除非有些地方想要不一样高。 # 自定义属性(CSS 变量) 可以声明一个变量,它赋一个值,然后在样式其他地方引用这个值。

89320

2018年9月9日用HTML开发网页总结

inline,标签; inline-block,行内块标签; block,块标签; div: 盒子 划线和下滑线:  python变量命名一般采用下划线,HTML命名规范一般采用划线...是让字体左右居中,让字体上下居中是设置一下高,line-height. margin-top 下边会变高吗?...##### #号言论待考证 如果第一个div1里面的内容高度小于或者等于本身定义div0高度的话,下一个div2就会自动靠下边最左边浮动 如果div1里面的内容高度大于div1设置高度的话...,div2位置不会靠最左边,而是在多出内容右下角开头浮动,如果div设了float:left; 则在div右边浮动。 ...要想让每一个div规规矩矩从上往下排列就需要给想要浮动那个个div设置宽度和高度,并给指定div设置floatleft.

1.1K60

高、(顶线、中线、基线、底线)、vertical-align

image.png (5)行内框、框 行内框:每个行内元素会生成一个行内框,行内框是一个浏览器渲染模型一个概念,无法显示出来,行内框等于内容区域,而设定高时行内框高度不变,半行距[(高-字体size...高度等于本行内所有元素中行内框最大值(以高值最大行内框基准,其他行内框采用自己对齐方式向基准对齐,最终计算高度),当有多行内容时,每行都会有自己框。... image.png 元素对高影响 高度是行内最高行内框高度,通过line-height调整,内容区高度与字体尺寸有关,padding不对高造成影响。...设置padding增加是 行内框(内容区)向外扩散距离。但高还是不变,也就是说,如果padding设置高大,就会出现行内框 > 现象。...但是在文档流,padding是会占据空间,如果有父元素,父元素高度还是按照高来决定。

1.8K20

「译」Flexbox 基本原理

项目不会依靠伸展来适应整个宽度(主轴),相反,它们采用收缩方式 ? 项目将会伸展以适应交叉轴(在这个例子高度)。如果各个项目的高度不同,它们将会伸展至与最高那个项目等高。...但是为什么弹性项目会占据整个屏幕高度呢?在第一部分,容器高度设置 100vh,因此可用空间被这四平分以适应 300px 项目。...假如我们没有设置 100vh,则容器高度等于项目内容高度,如下图所示 [1]: ? 另一个选项是 wrap-reverse,它将会反转交叉轴。...如果设置了容器高度,则 stretch 属性值会使所有的项目伸展至与容器等高;如果没有设置,则所有项目与最高项目等高 [5]。上面第一张图片中容器高度设置 100vh,第二张图片则没有设置高度。...下面的 gif ,项目 1 设置 flex-shrink: 10,项目 4 设置 flex-grow: 10。

1.9K30

CSS高(line-height)及文本垂直居中原理

在CSS,line-height 属性设置两段段文本之间距离,也就是高,如果我们把一段文本line-height设置父容器高度就可以实现文本垂直居中了,比如下面的例子: <!...2.png 默认情况下一文本高分为:上间距,文本高度,下间距,并且上间距是等于下间距,所以文字默认在这一是垂直居中。 2. 文本几条线 ?...5.png 如果一段文本高度16px,如果给他设置line-height高度200,那么相当于,文本上下间距高度增加了,但是文本本身高度依然是16是不变,并且一直默认在行框垂直居中,而上间距和下间距平分了...Chrome浏览器默认值 谷歌浏览器字体默认大小是:16px,字体最小值:12px,默认:18px;默认情况下如果没有给div设置高度,那么这个div高度会比其中文本大小大一点(这个大多少现在没有办法确定...单位 px(像素) 设置起来是最直接,同时也最方便。 %(百分号) 如果line-height单位设置%,那么将来在计算时候,基数是当前标签文本字体大小。

4.4K10

css基础

样式特殊性描述了不同规则相对权重,它基本规则是: 1 内联样式权值最高               style=""------------1000; 2 统计选择符ID属性个数...list-style-image 将图象设置列表项标志。 list-style-position 设置列表列表项标志位置。 list-style 简写属性。...block元素可以设置width、height、margin、padding属性;   inline元素不会独占一,多个相邻行内元素会排列在同一里,直到一排列不下,才会新换一,其宽度随元素内容而变化...假如某个div元素A是浮动,如果A元素上一个元素也是浮动,那么A元素会跟随在上一个元素后边(如果一放不下这两个元素,那么A元素会被挤到下一);如果A元素上一个元素是标准流元素,那么A相对垂直位置不会改变...>>>>解决方法: 1、固定高度 给.container设置固定高度,一般情况下文字内容不确定多少就不能设置固定高度,所以一般不能设置“.container”高度(当然能确定内容多高,这种情况下“.container

1.5K20

寒假提升 | Day4 CSS 第二部分

:Vue开发,每个组件都有一个style元素,使用是内部样式方式,不过原理并不相同 外部样式应用场景:外部样式是开发中最常用方式,将所有css文件放在一个独立文件夹,然后通过link...可以设置负数 二....(常用) 两个基线(baseline)距离 一文本 -> line-height 高 - 文本高度 = 行距 line-height 用于设置文本高可以先简单理解文字所占据高度...元素整体高度 line-height :元素每一文字所占据高度 应用实例: 假设 div 只有一文字,如何让这行文字在div内部垂直居中 让 line-height 等同于 height...选择器组(重要) 交集选择器 div.box 既是一个div, 也必须有一个classbox 并集选择器 div, p, h1 {} 3.7.

1.2K30

CSS 关于line-height详细讲解

对于块级元素,它指定元素行盒(line boxes)最小高度。对于非替代 inline 元素,它用于计算盒(line box)高度。...对于块盒 该属性是块盒content区域中行盒最小高度,不涉及padding、border区域,在实际开发,通常用来使文字内容居中显示;且在块盒没有设置高度前提下,则块盒高度默认等于line-height...第一张图片:父元素设置line-height值等于其自身盒子(border+padding+content)高度,导致其子元素文字内容下移。...第二张图片:父元素line-height值设置等于其自身盒子content区高度,则其子元素继承后,其文字内容能在父元素居中显示。...对于盒 该属性值就是该行盒高度,但是用 Computed在控制台得不到其高度(元素inline,则不显示宽高); CSS: span{ line-height: 20px; outline

63930

深入理解line-height

框也是浏览器渲染模式一个概念,无法显示出来。 高度等于本行中所有行内框高度最大值。当有多行内容时,每一都有自己框。...3 line-height实现垂直居中原理 通常情况下,diva标签包含文本,文本将默认出现在div顶端,如果想要垂直居中,可以设置div高度等于高,由于高不直接作用于块状元素且高可以继承...,所以实际上等效于设置a等于div高度。...a高即a行内框高度,即 内容区+行距。高默认是浏览器分配1.2,由于此时重新设置高☞☞所以行距跟着改变☞☞所以内容区上下往外延伸☞☞即行内框整体延伸。...但是,文字始终在行内框里垂直居中,行内框延伸终点是div高度,也就是延伸至行内框高度等于div高度。此时,文本自然会在div垂直居中。

2K71

前端面试题-每日练习(3)

(4)、具体 > 泛化,特殊性即css优先级 (5)、近 > 远 (内嵌样式 > 内部样式 > 外联样式) 内嵌样式:内嵌在元素,span 内部样式:在页面样式,写在样式...(2)浏览器兼容问题二:块属性标签float后,又有横行margin情况下,在IE6显示margin比设置大 问题症状:常见症状是IE6后面的一块被顶到下一 碰到频率:90%(稍微复杂点页面都会碰到...解决方案:给超出高度标签设置overflow:hidden;或者设置高line-height 小于你设置高度。...备注:这种情况一般出现在我们设置小圆角背景标签里。出现这个问题原因是IE8之前浏览器都会给标签一个最小默认高度。即使你标签是空,这个标签高度还是会达到默认高。...碰到几率:5% 解决方案:如果我们要设置一个标签最小高度200px,需要进行设置:{min-height:200px;height:auto!

13420

CSS再学

下面是权值规则: 标签权值1,类选择符权值10,ID选择符权值最高100。...所以前面的css样式优先级就不难理解了: 内联样式(标签内部)> 嵌入样式(当前文件)> 外部样式(外部文件)。...每个块级元素都从新开始,并且其后元素也另起一。 2.  元素高度、宽度、高以及顶和底边距离都可设置。 3.  元素宽度在不设置情况下,是它本身父容器100%,除非设置一个宽度。...元素高度、宽度、高及上下边距都可设置 盒子模型 边框: div{     border:2px  solid  red; } 相当于: div{     border-width:2px;    ...高度一致,height是该元素高度,line-height行间距指在文本中行与之间基线间距离。

1.9K70

网页设计基础知识汇总——超链接

设置边框宽度,以像素点单位边框宽度,不设置宽度默认值0 ——取值left、right、center,分别表示将表格在页面相对位置 ——设置边框颜色 —— 设置边框明亮部分颜色(当border只大于等于1才有用) —— 设置边框昏暗部分颜色(当border只大于等于1才有用) —— 设置表格单元格之间空间大小 —— 设置表格单元格边框与其内部内容之间空间大小 —— 设置表格宽度、高度,单位用绝对像素值或窗口、总宽度百分比 标签可以把文档分割独立、不同部分。  换行是 固有的唯一格式表现。可以通过 class 或 id 应用额外样式。

3.3K30

css基础

CSS 指层叠样式 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式 把样式添加到 HTML,是为了解决内容与表现分离问题 外部样式可以极大提高工作效率...外部样式通常存储在 CSS 文件 多个样式定义可层叠一个 css 层叠样式 如一个div元素可以添加多个样式,一个样式可以重复添加在一个元素上,以优先级最高|最近为主 css 使用方式;...1.行内样式:在标签上添加一个style属性,属性值添加样式 值在当前行有效 2.内部样式:head标签添加style标签对,标签对定义css样式 1)选择器{ 样式;...行内元素无效 line-height: 当前元素内容(文本|行内)每一都是line-height设置高度, 在这一内容是垂直居中 如: ....内容 + 内边距padding + 边框border + 外边距margin 内容显示在宽高大小,内边距不显示内容 内容:设置宽高都是内容大小 padding:元素设置背景样式默认延伸到内边距上

1.3K30

JS面试题(一)

eq()等于 括号里写索引 find()查找子元素 括号里写选择器 siblings()兄弟 可以写选择器可以不写 31、如何匹配表格第四以及第四以后?...找div是否有class ips 36、jQuery有哪些动画,分别设置是什么?...(“div”)[0] 一个是dom元素一个是jquery元素 48、将当前点击元素文字大小设置20px,兄弟元素文字大小设置16px,父元素增加class abc,将父元素兄弟元素删除class...abc ,父元素兄弟元素第一个子元素文字设置红色,最后一个子元素文字设置蓝色,父元素下一个元素逐渐消失之后,在父元素后面增加一个classnewDomdiv $(this).click...index= (this).index() 所有同辈元素索引 index= (“li:even”).index($(this)) 在匹配选择器元素索引 58、如何将对象转成json字符串?

9610
领券