首页 > 其他分享 >inline-block元素下移问题的分析及解决

inline-block元素下移问题的分析及解决

时间:2024-11-18 10:40:14浏览次数:1  
标签:vertical top 下移 inline div align block

不知道大家有没有遇到过这种蛋疼的情况,当你排列了三个 display 属性为inline-block的 div 时。
image

我们在其中一个div中输入文字,就会出现如下这种现象,设置文字 div 的布局变化了。
image

问题定位

为什么会出现这种情况呢?我们打开控制台查看一下元素布局,如下图我们能看到第二个 div 的排列方式以文字底部为基准了。

问题解决

vertical-align 属性相关,那么要实现我们要呈现的顶部对其效果,则设置为top即可。

vertical-align: top;

标签:vertical,top,下移,inline,div,align,block
From: https://www.cnblogs.com/duixue/p/18552016

相关文章

  • [POI2008] BLO-Blockade
    算法手玩样例可以快速得知,如果第\(i\)个点不是割点,只会导致其他点(以下设为点集\(O\))不能到达\(i\)点,不会影响\(O\)之间的连通性那么显然的,我们进行分类讨论\(i\)点不是割点显然的,只会造成\(2(n-1)\)的贡献\(i\)点就是割点这种情况稍微复杂,......
  • inline 函数:让你的 C++ 代码飞起来——深度剖析与实战技巧
    你是否曾经为C++代码中的函数调用开销感到烦恼?每次函数调用都需要创建栈帧、传递参数、跳转执行,这些看似微小的操作,累计起来就会成为性能瓶颈。在对性能要求苛刻的程序中,这些开销可能会影响到整体表现。今天,我们要聊的就是一个解决方案——inline函数。想象一下,如果编译器......
  • AutoCAD Blockview .net在wpf项目中的问题
    之前使用Blockview是遇到平移的问题,这几天在学习使用CommunityToolkit.MVVM框架来创建用户界面,当创建GsPreviewCtrl控件时会遇到错误,导致整个窗体不能显示,错误信息如下:**************异常文本**************System.InvalidProgramException:公共语言运行时检测到无效的......
  • LBA(Logical Block Addressing,逻辑块寻址)是一种硬盘寻址方式,用于将硬盘中的每个存储块
    LBA(逻辑块寻址)模式简介LBA(LogicalBlockAddressing,逻辑块寻址)是一种硬盘寻址方式,用于将硬盘中的每个存储块映射为一个唯一的逻辑地址。这种寻址方式使得操作系统能够通过逻辑地址而不是物理位置来访问硬盘数据,从而简化了硬盘的管理和数据访问。LBA的背景与作用在硬盘的传统寻......
  • Code Block学习
      CodeBlock 可以用CodeBlock直接输入数字,字符和公式 调用内置函数我们可以在CodeBlock中直接调用内置函数。比如,在空间中创建一个点,我们可以使用Point.ByCoordinates这样的节点,该节点可以通过输入x,y两个值来确定要创建点的位置。Point.ByCoordinates(10,10)......
  • blockchain | web3.py交互模板
    blockchain|web3.py交互模板exp:fromweb3importWeb3fromweb3.middlewareimportSignAndSendRawMiddlewareBuilderimportjsonw3=Web3(Web3.HTTPProvider('http://127.0.0.1:8545'))ifnotw3.is_connected(): print('connerr') exit(-1)......
  • uBlocklist屏蔽垃圾搜索结果
    近年来特别是Google的中文搜索结果体验越来越差,出现了越来越多「不知所谓」的网站,这些网站通过机器翻译、直接复制的方式「拼接」而成一个网站占据了大量的搜索结果,这类网站就是——「内容牧场」。什么是内容牧场内容农场(或内容工厂,英文名为contentfarm)是指生成大量文字性网......
  • WPF TextBlock控件 显示两段文字
    WPFTextBlock控件显示两段文字TextBlock控件不止显示两段文字,可显示多行。<StackPanel><!--显示多行,LineBreak表示换行--><TextBlock>盼望着,<LineBreak/>盼望着,<LineBreak/>东风来了,春天的脚步近了。......
  • 解决 Unexpectedlexicaldeclarationincaseblock的问题
    亲测可用,若有疑问请私信使用新版的es-lint的时候扫描旧的项目,发现报了Unexpectedlexicaldeclarationincaseblock(no-case-declarations)这么一个错误提示当时很奇怪,就去查了一下文档,发现中文文档中解释比较简单该规则禁止词法声明(let、const、function和class)出......
  • 解决 Unexpected lexical declaration in case block 的问题
    亲测可用,若有疑问请私信使用新版的es-lint的时候扫描旧的项目,发现报了Unexpectedlexicaldeclarationincaseblock(no-case-declarations)这么一个错误提示当时很奇怪,就去查了一下文档,发现中文文档中解释比较简单该规则禁止词法声明(let、const、function和class)出......