两个并行的div高度保持一致

最新推荐文章于 2026-04-29 07:02:39 发布
原创 最新推荐文章于 2026-04-29 07:02:39 发布 · 1.3k 阅读 · 3 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#CSS
本文介绍了一种使用CSS display属性实现div元素并排显示的技巧，通过将外层div设置为table，子元素div1和div2设置为table-cell，轻松去除浮动限制，实现元素水平排列。

在这里插入图片描述

给外层div添加： display: table
给div的子元素div1和div2添加： display: table-cell
去掉浮动

完事！！！

DIV左右两边高度永远相等
06-15
如果左边的高度小于右边的高度，则左边自动增加高度。如果左边的高度大于右边的高度，则右边的高度自动增加
div两边等高
w_t_y_y的博客
01-13 4266
现有两个横向排列的div，希望两个div高度保持一致，有以下方法：
两个div，高总都保持一样高（总结）
红角'blog,一步一步!
09-17 3352
 1html>head>title> 测试 title>head>body>div style="width:100%; height:100%">div id="content" style="width:49%;border:1px #CCCCCC solid; height:100%; float:left; margin-left:1px">文章br>br>input type
别再手动同步了！用飞书事件订阅自动同步员工信息到企业微信/钉钉
最新发布
weixin_30856725的博客
04-29 609
本文详细介绍了如何利用飞书事件订阅功能实现员工信息自动同步到企业微信和钉钉，解决多平台数据同步的痛点。通过Webhook机制，飞书能实时推送员工信息变更，大幅提升数据一致性和工作效率。文章包含实战步骤、错误处理策略及高级应用场景，帮助企业IT管理者构建可靠的自动化同步系统。
左右两个DIV等高的四种方法
weixin_30783629的博客
04-12 1204
1：使用背景图 就是两个DIV外面套一个DIV，然后repeat-y一个背景图，这种方法不是真的等高，只是只要有一个内容增多，背景图就会纵向重复，形成左右等高的效果。 2：使用表格 用table，两个TD，一侧内容增加另一侧会自动拉长 3：使用CSS控制（个人感觉最好的方法） 两个DIV都设{margin-bottom:-10000px; padding-b...
让两列Div一样高（自适应高度）
twosecond
06-23 2730
正 文：    由于设计页面需要，要把两个并排显示的div实现一样高的效果，n行n列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标。方法有以下几种：1、JS实现（判断2个div高）；2、纯css方法；3、加背景图片实现。首先说下本博客实现的2个div一样高的方法（即js方法）。    div css基本布局：    1、js实现div自适应高度代码如下
html js div 内容高度,关于两个div高度保持一致的（css+js）两种解决办法_html/css_WEB-ITnose...
weixin_30865253的博客
06-17 867
最近修改以前写的一些代码，发现点问题。比如2个div需要动态的保持一致的高度。css的做法是： 精心开发5年的UI前端框架！.代码如果实际的高度不大于10000px，那么这个是没有问题的，如果有一边的实际高度大于了10000px，则另外一边的高度只能被定义为10000px，不符合实际运用的需求。经过测试，用js可以解决这个问题。代码如下： 精心开发5年的UI前端框架！.代码 var he...
前端实例知识点-多个并行的DIV实现高度一致
热门推荐
ccsawcc的博客
01-11 1万+
博客前言： 做为一个程序员，在复杂的工作环境中总要学着去承担更多的责任，和接触更广泛的知识。然而在接触新区域时，一个小白总是为自己能钻研出一点点东西感到十分兴奋，为了让这份成就感附属的知识点留给自己，决定记录下来这些小知识点（敲黑板，期末要要考...）。可以方便以后查阅，还有可能分享给遇到同样问题的同学们。 前端知识点（一）：多个并行的DIV实现高度一致 我的前端启蒙来源于工作初期的
关于两个div高度保持一致的（css+js）两种解决办法
10-14 2015
最近修改以前写的一些代码，发现点问题。 比如2个div需要动态的保持一致的高度。 css的做法是：  .代码   "overflow:hidden">              "left" style="margin-bottom:-10000px; padding-bottom:10000px;">
父亲div的高度随子div高度变化关系
Yiyuan_chen的博客
03-06 2757
情况一：父div未设置高度   浮动子div设置高度 父亲div的高度随子div高度变化关系 #main{width: 300px;background: red; } #son1{width:100px; float: left;} #son2{width: 200px; float: left;} 块1 快2 说明：其中我在main
vue 两个div高度保持一致
weixin_42065453的博客
08-04 912
元素，并计算它们的最大高度。然后，将最大高度赋值给。元素的高度将会保持一致，并随着窗口大小的改变而更新。钩子函数中，移除了监听器，以防止内存泄漏。我定义了一个 Vue 实例，并将其绑定到。事件以在窗口大小变化时更新高度。通过以上代码，两个独立的。
如何让2个并列的div根据内容自动保持同等高度
weixin_34071713的博客
10-29 705
有左右2个并列的div，2个div都不能限定高度。左div为导航，右div为内容。如何能让左div块自动获得和右div块相等的高度？ 同时，也有网友提问到“如果右块高度比左块低，会不会导致左块的内容被溢出不显示之类的问题。应该是取左右2者的最高值吧来对齐吧”。 的确应该是哪个div Height值大，就将其值赋给Height值小的div，从而使2个div高度始终保持...
如何让左右两个div各占50%，并且高度相同？
两天打鱼三天晒网
08-05 1193
如何设置两个div各占一半，并且高度随着内容增加，而且两边div的高度一致呢？默认会发现高度不一致，改用flex就可以了，另外发现传统的table也可以轻易实现。不知道不用flex的话是否可以实现。
两个div一行保持同高度 display:flex
qq_41451744的博客
05-09 4510
描述： 想让两个div在一行展示，然后右边的div高度不定，想让左边的div高度跟随右边高度变化。 1、两个div在一行展示：设置两个div的样式 display: inline; 2、用一个div 包括上面两个div,在父级div中设置样式：display: flex; ...
布局：上下两个div高度固定，中间自适应
08-16 751
需求：经典布局 ——头尾固定高度中间高度自适应布局 头部固定高度，宽度100%自适应父容器； 底部固定高度，宽度100%自适应父容器； 中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条； 整个内容填满浏览器可视区域，并且不超出此区域！ 方法一：position:absolute定位，不设高，并改变"包含块"的尺寸渲染 固定头尾，所以，至少...
让并排的两个Div自适应高度（一样高）
GOBY 栏目
04-22 1655
 由于设计页面需要，要把两个并排显示的div实现一样高的效果，n行n列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标。方法有以下几种：1、JS实现（判断2个div高）；2、纯css方法；3、加背景图片实现。首先说下本博客实现的2个div一样高的方法（即js方法）。       div+css基本布局：   <div id="mm"><div ...
设置多个模块（div）高度一致
sunOpar的博客
02-27 7552
实现目的假设你的页面中有几列高度非固定的模块，他们的顶部是对齐的，而他们的高度会随着其内容的增删而变化，你又希望让他们无论如何都能保持高度一致，也就是说高度自适应且保持一致，这时就可以使用以下方法。具体方法1.首先给他们设置一个外包裹层。效果如图： 具体如下 html：<div class="content-wrap">------------外包裹层 <div class="subco
layui一行并排两个卡片面板小记
y5706745的博客
03-17 2872
工作上遇到要使用卡片面板的页面，且一行并排两个，效果图如下：
html-两个div，让一个div跟随另外一个div的高度
qqRZL的博客
12-04 1114
在开发的过程中遇到有些场景事这样的，两个div的高度不一致，而且都是动态高度，有的时候div1高，有的时候div2高，如果设置flex的话，那么就会把较矮的元素撑大，但是我想始终都以div1的高度作为基准，div2的高度超出div1的高度则显示滚动条，没有超出就正常显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值