前端实例知识点-多个并行的DIV实现高度一致

最新推荐文章于 2024-10-10 17:36:40 发布
置顶 最新推荐文章于 2024-10-10 17:36:40 发布
阅读量1.4w 收藏 12
点赞数 9
文章标签： HTML CSS DIV
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ccsawcc/article/details/79034914
版权
本文介绍了如何在前端开发中，通过CSS的display:table-cell属性解决多个并行DIV高度不一致的问题。作者在解决实际工作中遇到的动态内容填充导致的DIV高度调整难题时，发现并分享了这一实用技巧，避免了使用float属性和重构代码。
摘要由CSDN通过智能技术生成

博客前言：

做为一个程序员，在复杂的工作环境中总要学着去承担更多的责任，和接触更广泛的知识。然而在接触新区域时，一个小白总是为自己能钻研出一点点东西感到十分兴奋，为了让这份成就感附属的知识点留给自己，决定记录下来这些小知识点（敲黑板，期末要要考...）。可以方便以后查阅，还有可能分享给遇到同样问题的同学们。


前端知识点（一）：多个并行的DIV实现高度一致

我的前端启蒙来源于工作初期的一个内部分享会，从此就记住了用 float来控制DIV的浮动。而这个也成为后来我遇到如标题所示的问题的原因。前端做为实现网页外观的最基础也是最重要的语言，其实并没有那么容易，尤其像我这种没有系统学习而是遇到问题随手百度乱试的，只要能解决就不考虑解决的原理以及对未来的支持和适应。但是在工作中真的很难有时间去静下心来研究本末。回到本篇的主题，当我去创建一个页面结构是如下图所示的样子：


简而言之我的思路就是将DIV1和DIV2都给予浮动：float: left; 由于DIV1和DIV2的内容都是后台提供的动态数据，不是静态元素那就很难去给一个固定的高度控制DIV。然后由于需求需要两个DIV的内容保持高度一致，试了n种调整高度height的方法都没办法得到满意的效果。于是想起了table是可以达到

最低0.47元/天 解锁文章
html怎样保持高度一致,并列不等高块状元素保持高度一致
weixin_42392054的博客
06-27 920
前言：前段时间开发的时候产品提出了一个需求：若干个div并行排列，顶部对齐，这些div的高度和最高的div相等，并且高度是经常变化的。当时使用了JS来实现，但是一直觉得繁琐，后来查资料发现是可以用纯CSS实现的，所以特别记录下来。通常来说其实不需要特别的设置相同高度，最高的块状子元素会自然的撑起父元素，如下图：子元素无背景色但是有时候子元素和父元素背景色不同，这是就会出现如下图的情况：子元素背景色...
前端基础知识点-每天一个基本知识点（100+个前端小知识，你是否都知道？）
m0_67394006的博客
03-02 9238
文章目录 前言 第一回合 一、知识点：cookie（21/09/06） 二、知识点：节流和防抖（21/09/07） 三、知识点：var和let以及const（21/09/08） 四：知识点：深拷贝和浅拷贝（21/09/09） 五、知识点：作用域和作用域链（21/09/10） 六、知识点：从输入URL到页面展示这中间发生了什么（21/09/11） 七、知识点：重排和重绘（21/09/12） 八、知识点：TCP和UDP（21/09/13） 九、知识点：三次握手（21/09/15） 十、知识点：绝对定位和相对定
多div 高度自适应 解决方案详解
xiongzhengxiang的专栏
08-24 1288
以两列div为例，由于两边内容都可能动态增长，所以不能写死高度，这就造成高度不一致的问题了。为了实现左右高度相同，除了使用js动态修改、table外，我们可以使用多div高度自适应的技巧。 两列div框架如下： <div class="left"
html中＜div＞标签设置宽度和高度都有哪些方法
最新发布
servepeople的博客
10-10 2117
在 HTML 和 CSS 中，设置<div>标签的宽度和高度有多种方法，取决于你希望如何控制它的尺寸。
如何让2个并列的div根据内容自动保持同等高度
weixin_34071713的博客
10-29 622
有左右2个并列的div，2个div都不能限定高度。左div为导航，右div为内容。如何能让左div块自动获得和右div块相等的高度？ 同时，也有网友提问到“如果右块高度比左块低，会不会导致左块的内容被溢出不显示之类的问题。应该是取左右2者的最高值吧来对齐吧”。 的确应该是哪个div Height值大，就将其值赋给Height值小的div，从而使2个div高度始终保持...
让并排的两个Div自适应高度（一样高）
GOBY 栏目
04-22 1496
 由于设计页面需要，要把两个并排显示的div实现一样高的效果，n行n列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标。方法有以下几种：1、JS实现（判断2个div高）；2、纯css方法；3、加背景图片实现。首先说下本博客实现的2个div一样高的方法（即js方法）。       div+css基本布局：   &lt;div id="mm"&gt;&lt;div ...
设置多个模块（div）高度一致
sunOpar的博客
02-27 7211
实现目的假设你的页面中有几列高度非固定的模块，他们的顶部是对齐的，而他们的高度会随着其内容的增删而变化，你又希望让他们无论如何都能保持高度一致，也就是说高度自适应且保持一致，这时就可以使用以下方法。具体方法1.首先给他们设置一个外包裹层。效果如图： 具体如下 html：<div class="content-wrap">------------外包裹层 <div class="subco
前端面试题知识点总结（仅供参考）
jiang16608544720的博客
03-14 1856
以下是本人面试后总结出来的面试知识点： 1.1. 模块化 \1. ES6 \2. Commonjs 1.2. 构建工具 \1. Webpack核心思想：模块化打包 \2. Webpack基本配置: entry, output, module&rules, plugins, devServer, devtool, resolve \3. 打包各种资源: JS / CSS/img/html/… \4. 加分项: 自定义webpack打包环境, Webpa
开发知识点-NodeJs-npm/Pnpm/Yarn包管理器
aming小老弟
11-08 1396
Node.js 是一个基于 Chrome V8 引擎的开源免费跨平台的 JavaScript 运行环境。由于 Node.js 进程尝试加载 providers.dll 时没有指定 DLL 的绝对路径。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。攻击者可以在当前工作目录写入恶意 DLL 文件进行 DLL劫持攻击。Windows 会按照特定策略进行搜索以找到所需的 DLL 文件。Node.js 组件存在 DLL 劫持漏洞。快速的，节省磁盘空间的包管理工具。
2021前端知识总结-部分解答-持续更新
JCat的博客
03-12 1290
一、h5c3部分 1.css实现垂直水平居中的方式？ 行内元素，父元素设置： div{ height:60px line-height:60px; text-align: center; } 块级元素，已知宽度 div { width:100px; margin:0 auto; } 块级元素，未知宽度-- flex/定位， flex布局 div{ display: flex; justify-content: center; align-items: ce
html三个div相同高度,保持三列div布局的高度相同的方法
weixin_42532938的博客
06-08 776
对自己的三栏css进行修改。发现中右两栏的高度无法与左边的日志栏自动适应。日志栏由于日志的数量会变动。但如果日志栏高度低的话，又无法与中右栏高度一致。上网找了下，有一种利用overflow属性把多个div(这些div都设置了超长的高度或者宽度)进行平整，效果不太好。似乎纯粹css无法做到div高度自适应。这里有个方法：假设有div1,div2,div3(三个子div，不管哪个栏变动)。在加载页面里...
一个DIV中, 多个子DIV高度统一自适应
aaw42424的博客
07-10 391
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>...
所有子div的高度一样
心若向阳 无谓悲伤
12-02 689
本文案例：3个不同内容量的子div高度一致 第一步：编写html代码 <div id="parent"> <div class="child">子div1</div> <div class="child">子div2</div> <div class="child">子div3&lt...
左右两个div高度自动一致，自适应高度
杨斐的专栏
03-27 7744
1、js实现div自适应高度  代码如下： window.onload=window.onresize=function(){ if(document.getElementById("mm2").clientHeight document.getElementById("mm2").style.height=document.getElementById("mm1").offset
html怎么让div左右自动,如何让2个并列的div根据内容自动保持同等高度
weixin_33904522的博客
06-02 740
最近在工作中碰到一个需求：有左右2个并列的div，2个div都不能限定高度。左div为导航，右div为内容。如何能让左div块自动获得和右div块相等的高度？同时，也有网友提问到“如果右块高度比左块低，会不会导致左块的内容被溢出不显示之类的问题。应该是取左右2者的最高值吧来对齐吧”。的确应该是哪个div Height值大，就将其值赋给Height值小的div，从而使2个div高度始终保持一致。看代...
多个div float，如何让div的高度自动对齐
blacksource的专栏
12-30 4165
一行排三个div 如何让同一行的DIV高度会跟内容最多的div高度保持同一高度 div{float:left;} 内容多 内容少 内容多 内容多多 内容少少 内容少 解决方法，在所有div外面套个div，然后把overflow设置为hidden，并对内部div设置margin-bottom:-10000px;padding-bottom:10000px; #main{
html js div 内容高度,关于两个div高度保持一致的（css+js）两种解决办法_html/css_WEB-ITnose...
weixin_30865253的博客
06-17 771
最近修改以前写的一些代码，发现点问题。比如2个div需要动态的保持一致的高度。css的做法是： 精心开发5年的UI前端框架！.代码如果实际的高度不大于10000px，那么这个是没有问题的，如果有一边的实际高度大于了10000px，则另外一边的高度只能被定义为10000px，不符合实际运用的需求。经过测试，用js可以解决这个问题。代码如下： 精心开发5年的UI前端框架！.代码 var he...
两个div一行保持同高度 display:flex
qq_41451744的博客
05-09 3837
描述： 想让两个div在一行展示，然后右边的div高度不定，想让左边的div高度跟随右边高度变化。 1、两个div在一行展示：设置两个div的样式 display: inline; 2、用一个div 包括上面两个div,在父级div中设置样式：display: flex; ...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值