DIV 设置 display：inline-block 导致 DIV 对不齐的解决方法

最新推荐文章于 2022-01-06 16:33:36 发布
原创 最新推荐文章于 2022-01-06 16:33:36 发布 · 2.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#displayinline-block

本文介绍三种CSS布局技巧：通过调整div的vertical-align属性实现顶部对齐；将display属性从inline-block更改为inline-table；以及为两个div元素设置float属性实现左浮动。

1.将div的样式中加上，vertical-align:top;

2将inine-block改为inline-table

3.给两个div设置浮动


上面是设置table的和vertical的，下面的是左浮动的

display:inline-block的原理分析
09-25
IE 6 和 7 不直接支持 `display:inline-block`，但在某些情况下，对内联元素设置 `display:inline-block` 会触发 "layout"，这是一种 IE 特有的行为，使元素获得类似 `display:inline-block` 的效果。然而，对于块级...
深入display:inline-block
09-25
当一个元素设置了`display:inline-block`，即使IE不识别这个属性，也会因为这个设置而触发hasLayout，使得元素获得类似`block`的特性。要使IE正确显示`inline-block`，可以采取两种策略： 1. 先使用`display:inline...
关于div的设置：display：inline-block出现div对不齐的情况处理方法·
暮雪进化史
03-09 2196
多个并列div设置display：inline-block的时候 某些浏览器会出现：其中某一个div比其他的高或者和低的情况 解决办法为：为每个div加上vertical-align:top的属性
css总结 -使用display：inline-block，出现元素高度错位
benben0729的专栏
08-30 1万+
在进行页面布局时发现一个问题,两个相同高度的元素显示高度不一致，发生错位。 <style> .left{ display:inline-block; height:110px; width:110px; } .right{ display:inline-block; height:110px; width:110px; } </style> ...
解决： 排列inline-block元素出现顶部不对齐的问题
Ada Yan
12-22 1857
最近在写有关响应式布局的样式，当用inline-block横向排列li元素时，出现了一个奇怪的问题，就是横向排列的元素上部没有对齐。查找了好多原因，最终在stackoverflow上搜到一篇相关解答，与大家分享下。   问题原链接：http://stackoverflow.com/questions/1885873/vertical-alignment-of-empty-inline-block
inline-block元素出现位置错位的解决方法
weixin_34375233的博客
11-30 497
如下代码所示： <div class="container"> 　　<div style="display: inline-block; height: 100px; width: 100px;"><img src="/myImg.jpg"></div> 　　<div style="display: inline-block; hei...
采用display:inline-block设置多个div并列，div内添加内容后div错位
Acid_lemon的博客
06-02 535
页面代码 <div class="transfer"></div> <div class="operations"></div> <div class="transfer"></div> .transfer{ display: inline-block; width: 380px; height: 208px; border: 1px solid #D5DEED; background-color
CSS属性display:inline-block用法深入理解
09-25
早期版本的Firefox不完全支持此属性，而是使用其私有属性`-moz-inline-box`，但这个属性存在一些问题，比如可能导致文本对齐问题，需要使用`-moz-box-align`来解决。由于这些限制和潜在的兼容性问题，通常建议避免...
css解决display:inline-block;产生的缝隙（间隙）的方法
09-27
在CSS布局中，`display: inline-block` 是一个常用的属性，它允许元素以行内元素的方式排列，同时具有块级元素的部分特性，如指定宽度和高度。然而，使用`display: inline-block` 时，元素之间往往会出现一些...
div添加display: inline-block;后添加文字盒子位置发生改变
qq_41643226的博客
03-23 2836
学习记录： 在实际开发中遇到一个问题，display: inline-block;的div在其中添加文字或者其他元素都会导致盒子位置发生改变，我上网搜了一下，查到了解决方案，给inline-block的元素添加一个属性：vertical-align:middle（不知道原因）就解决了 ...
css的inline-block布局方式对齐问题
qq_25349323的博客
04-12 3127
今天在实现百度前端技术学院的如下案例时遇到了div上下对齐问题。 针对如下左右两栏布局，本来使用将两栏各自div的display设置为inline-block方式来实现，为了左边高度与右边对齐，直接量出右边div按照像素高度赋给左边。 但是左边元素竟然出现在了下边，没有与右边上下对齐。 后来经过百度与实验发现，将设置为inline-block时候，div并不能根据div边缘来对齐，而是根据里面...
“设置display:block-inline的li或div中添加文字后，导致li或div排版掉落、错位”的原因及解决方法
titoni_yunruohan的博客
11-25 4194
 情景    在了解可以通过设置display：inline-block会将块级元素拥有inline元素一行排列的特性，那么我们可能想要通过将li的display属性设置为inline-block来实现块级元素的行排列，这时候你可能说通过设置浮动float就可以解决，不着急，float的原理和实现作为补充内容会接着聊，那么接下来先通过效果图来看一下问题所在 代码展示（通过设置display将li...
多个div横排位置错乱
小码哥
06-06 591
如果你用了display:inline-block; 那么给相应的div加上vertical-align:middle就能解决这个问题了
inline-block导致的错位问题详解
kliberty的博客
02-25 869
如图：想要让黄、红两个盒子水平排列，方法有很多，有position定位，float浮动，实在不行还有弹性盒display：flex；还有一种方法就是display：inline-block；将其变成行内块元素，便可以水平排列，但是问题就出现在了这里，当我们设置display：inline-block；后会出现下图的情况 出现这种错位的原因，其实是因为我们编写css所使用的编辑器，给每一个元素都添加了一个默认的vertical-align:baseline;属性；baseline是基线对齐的意思，基线即我们
多元素高度不一致浮动错位问题
H-L的博客
04-25 1903
当多元素高度不一致时，经常会出现，元素错位的现象，如下：当给浮动元素加上clear:both后即可完美解决
css:inline-block存在的小问题
weixin_45977625的博客
01-06 633
问题： 最近在项目中遇到一个问题，在div使用了display:inline-block后，div之间会存在空白间隙，翻阅资料后发现，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。 去除空隙的方法： 1.将子元素标签的结束符和下一个标签的开始符写在同一行 或 把所有子标签写在同一行； 2.父元素中设置font-size为
display:inline-block 出现的元素错位问题及解决方案
热门推荐
雾隐雾现的至渝博客
04-21 2万+
背景             布局想让两个div在一行显示，用了display:inline-block             但是出现了如图的错位情况，左边放了ul 右边就突然往下拉跨了一段 解决办法             在display:inline-block 后面添加
DIV 设置 display：inline-block 导致 DIV 对不齐的解决方法
ForeverCjl的专栏
11-21 1万+
情景代码如上。 出问题的浏览器： 360，sogou，猎豹的极速模式 给DIV设置display：inline-block属性后，这四个DIV会拍在一排，但是会个别的高一点，不对齐。 解决方法： 给div设置vertical-align：top vertical-align：top"> vertical-align：top"> vertical-align：top"> ver
同一行元素顶端对齐的方法
沉迷学习 日渐消瘦
09-12 1万+
1.同一行的行内块状元素inline-block默认的都是顶端对齐 <style> <span style="white-space:pre"> </span>.div1,.div2,.div3{display:inline-block;width:100px;height:} .div1{height:100px;background:#cc...
react的html中用map循环生成div设置display:inline-block不生效
最新发布
11-05
在React中，如果你使用`map()`函数遍历数组并尝试将每个元素包裹在`<div>`标签内，同时设置`display: inline-block;`样式，有时候可能会遇到样式未生效的情况。这通常有以下几个原因： 1. **JSX语法错误**：确保你...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值