css两个display：inline-block的div顶部对齐

最新推荐文章于 2024-05-10 14:37:42 发布
最新推荐文章于 2024-05-10 14:37:42 发布
阅读量2.4k 收藏 2
点赞数 1
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5b03e2796fb9a07a9a11312e
本文介绍了一种让两个div元素在同一行显示并实现顶部对齐的方法。通过使用CSS属性`vertical-align：top`，可以确保两个div元素的顶部边界对齐，从而达到预期的布局效果。

情景：设置两个div在同一行显示，但是没有顶部对齐，效果如下：


使这两个div顶部对齐：

vertical-align：top复制代码

最终效果：



css div设置inline-block后 div顶部对齐
weixin_30315905的博客
05-12 310
div{vertical-align:top} 转载于:https://www.cnblogs.com/SunSong/p/6846776.html
使display:inline-block；并排的两个div元素顶部对齐
weixin_43824675的博客
07-01 1613
css 添加 vertical-align: top;
css，使两个在同一行内的display:inline-block的div顶部对齐。
weixin_30468137的博客
12-30 345
两个都加上：vertical-align:top; 转载于:https://www.cnblogs.com/zccfun/p/6236499.html
css:解决因为 display: inline-block； 而没有顶部对齐的问题
A88552211的博客
05-23 1354
上面红圈的为一个 div 包裹的，同一层级。都使用 display: inline-block 进行同行，但是不对齐。 解决方法： 给这两个 div 加上 vertical-align: top 就能顶部对齐了
28.inline-block使用，缝隙，对齐
qq_36367494的博客
02-18 1347
1.display:inline-block简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。  2.为什么产生水平空隙：inline 元素会产生空隙，block 元素不会产生空隙。看看 inline 元...
css 设置行内元素顶部对齐
blue beard的博客
04-07 3425
display: inline-block;vertical-align: top;
inline-block元素上浮无法对齐的解决办法
热门推荐
智欣约的博客
08-14 1万+
不得不说display:inline-block;是一个强大的css属性，它解决了很多float浮动布局的不足，让页面布局更随意、富有弹性。但这个改变了元素类型的属性也存在着很多容易让人忽视的小问题，如之前我有写过的《li标签间有空白是怎么回事? 消除li横排后空隙》，我们姑且称之为“bug”吧（实则不然），只有我们掌握了这些问题的解决办法，才能更加熟练的使用这一布局神器。 笔者这次遇到的一
inline-block的上下排列对齐问题
Start -ZJ的博客
08-10 2180
今天使用inline-block想在一个div里上下排列两个p元素，都是怎么排都不对。 如图： 具体的H5代码： <div class="modify-rank-install"> <ul> <li class="modify-rank-install-big"><div><p>KKKKKK</p...
div横排放置对齐问题；block,inline,inline-block区别
04-11 304
1、左右两个div都设置为float:left，如果右边div没有设置宽度，右边div的宽度会根据div里的内容自动调整。 缺点：不易控制 2、只有左侧div设置为float:left，右侧div设置overflow:auto;，右侧div将会占据整个右侧剩余宽度。 缺点：如果有多个div 比如三个及以上了？ 3、两个div都设置为display:inline-block;这样...
Web前端之Style样式实现垂直顶部与底部对齐、上下两端对齐、between、display、content、height、space、wrap、flex、Css
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
12-01 3565
Web前端之Style样式实现垂直顶部与底部对齐、上下两端对齐、between、display、content、height、space、wrap、flex、Css
display的属性设置为inline-block、inline和block会有什么区别、垂直对齐设置vertical-align详解
galaxyJING的博客
05-10 579
这里我希望你认真看一下vertical-align的官方定义及使用标注，你会发现特别说明只有inline和inline-block元素才能设置。display的属性设置为inline-block、inline和block会有什么区别。垂直对齐设置vertical-align。
【笔记】学习CSS布局16——inline-block布局
二木成林
11-30 430
你可以使用 inline-block 来布局。有一些事情需要你牢记： vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。 你需要设置每一列的宽度 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙 代码实例： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;st...
display属性及inline-block值（可用来布局）
weixin_34126557的博客
04-07 226
display:block就是将元素显示为块级元素. 　　block元素的特点是：　　总是在新行上开始；　　高度，行高以及顶和底边距都可控制；　　宽度缺省是它的容器的100%，除非设定一个宽度　　<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。 display:inline就...
CSS样式问题之display:inlink-block；后最后一个元素与前面的元素不能对齐
Cocoon_Xu的博客
02-26 467
如图两列图标我使用的是将每个块元素display:inlink-block，实现了在固定宽度里两个块元素占一行，这样比写多行要方便很多，也不用使用float带来的更多烦恼。但就是出现了一个问题，就是前面几行效果都不错，就是最后一个元素不对齐。原因是两个并列的inline-block默认是基线对齐的，可通过设置。在项目实践中总有些奇怪的样式问题让人头疼，总觉得代码没什么问题，但效果就是不理想，我这些天就遇到两个头疼的问题，原因查找了很久，解决之后又觉得这么简单，时间都浪费了。
display:inline-block 浮动时，头部无法对齐解决办法
Jesse
01-17 1701
在父类增加： vertical-align: top; 问题原因在于元素的内容不一致导致对齐的位置不一致，所以需要增加以上属性，目的是把元素的顶端于行中最高的元素的顶端对齐~
行内元素对齐：display-inline-block
cangdu的专栏
01-04 4351
问题描述 两个div属性都是display：inline-block;但是一个有内容一个没有内容 为什么会出现高低不平的现象？ 看效果~ .div-3, .div-4 { display: inline-block; width: 100px; height: 50px; line-height: 50px; background: #003
display inline-block 后不对齐的解决办法
TSORA-C的博客
11-25 1228
<h1 id="displayinline-block后不对齐的解决办法">display:inline-block;后不对齐的解决办法</h1> <p>解决办法</p> <ul> <li>verti
display中的基线问题
一个前端仔的博客简介
07-18 1099
当用display：inline-block来布局时，当div里面有文字时，布局 就会上下不在一个水平线，而且两个div之间会产生一条缝。如下图 所示 原因：字体下面有一条基线，就是最后一行字体所在的水平线，默认为基线对齐， 而左边只有一行字，右边有三行字，默认最后一行对齐，所以垂直方向不对齐。 而水平方向有一条线的原因是display：inline-block把块及标签改成了内联标
CSS中，display属性、行高属性line-height以及垂直对齐方式vertical-align属性详细探讨
蔡武坤的博客
04-04 1713
在CSS中，line-height属性往往是我们调整行距的方法，今天这篇文章来尝试探讨这一属性，首先了解几个概念：1. 块级元素与行内元素：    HTML元素分为两大类，块级元素（包括p、h1、div等元素）以及行内元素（又称短语元素，包括strong、span等元素）2. 行框：    在我个人的理解中，在正常的文档流情况下，从上到下渲染的水平单元就是行框。而行框内部是从左到右进行渲染的，行框...
css样式display: inline-block
最新发布
03-18
在这个例子中，两个 `<span>` 元素被赋予了 `inline-block` 样式，因此它们可以在同一行上呈现，并且各自具有指定的高度和宽度。 #### 解决常见问题 当运用 `display: inline-block` 时可能会遇到一些间距问题，这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值