多个div inline-block的时候，如果有一个div没有内容其他div会下沉？

最新推荐文章于 2022-05-02 13:30:33 发布
最新推荐文章于 2022-05-02 13:30:33 发布
阅读量359 收藏 1
点赞数 2
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feng_strong/article/details/103108401
版权 
框内有文字和没文字的区别，高度伸展的方向是不一样的。当有文字的时候，高度是向下扩展的，没文字的时候是向上扩展的。

解决方案：

1、float（脱离文档流不好控制 次次选）

2、给div加上内容，空格 （次选）

3、vertical-align：top/middle/bottom改名默认设置（首选）

feng_strong
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
为什么当多个inline-block的div中，如果有的div没有内容而有的div有内容，有内容的会下沉？...
weixin_34290000的博客
12-11 181
为什么当多个inline-block的div中，如果有的div没有内容而有的div有内容，有内容的会下沉？ 就像这样   两个div高度相同，第二个我写了一个1当作 有内容吧，它就下沉了。。。  奇怪。。。 为什么有内容的就比没有内容的矮呢？ 如果都有内容就一样高，求大神解释下 最外层的div声明了text-align：center；属性。。。为了让里面的inli...
div “下沉”
weixin_30367873的博客
11-18 272
　　最近在做一个计算器，按键整体布局如下： Div2，div3 display属性设置为inline-block。三个div “容器”没添加任何元素时，布局是符合预想的。添加上按键后，布局变成下面这样了： Div3 明显得下沉了。重新确认了按键和容器的尺寸，按键都在容器内，不存在由于存放存放不下，导致布局的改变。Div1 也不存在外边距。手动添加div3 的margin-...
inline-block元素 内容问题
qq_43504447的博客
05-02 132
https://www.cnblogs.com/jiangzilong/p/6145157.html
多个有inline-block的div的间距与编程的写法有差异
01-19
在学习inline-block时我发现多个有border、inline-block的div的间距会根据编程的写法有差异，当书写为： 复制代码代码如下: <div>…….</div> <div>…….</div> 这时div之间是无间距的。 若书写为： 复制代码...
inline-block元素的4px空白间距解决方案
01-19
有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的...
CSS属性display:inline-block用法深入理解
09-25
首先，`display:inline-block`的作用是将元素呈现为内联对象，这意味着它们会与其他内联元素排列在同一行中，不会强制换行。同时，`inline-block`元素的内容会按照块级元素的方式处理，允许设置宽高、内外边距等。...
让多个div在同一行显示的样式及html代码
09-25
在网页设计中，常常需要将多个div元素在同一行内排列显示，以便布局的美观性和内容的逻辑性。从提供的文件信息来看，文档旨在展示如何使用CSS样式和HTML代码让多个div在同一行显示，并提供了具体的代码示例供初学者...
浅谈实现两个div并列的多种方法
热门推荐
筱葭的博客
03-16 2万+
方法一：float #div1{ width:50%; height:300px; background:blue; float:left; } #div2{ width:50%; height:300px; background:green; float:left; } 方法二：display:table-cell #parent{ width:100%; di
div中加入内容会下沉
Charonmomo的博客
02-28 2152
复现 有这样一个布局. 上半部分有三个div, 没有使用定位或浮动, 调整好布局后, 显示正常. <!-- 配置部分 --> <div> <!-- 展示部分 --> <div class="configPart"> <div class="showPart"> <div class="showSelectDiv"> <!-- &l
并列 inline-block 元素互相影响问题
weixin_30821731的博客
12-08 281
今天在做页面时发现一个很奇怪的问题：当两个设置了display: inline-block; 属性的元素并列排放时，它们的位置能够互相影响。 我们先来看看元素结构： <div class="container"> <div class="container-demo1"> <span>1</span> ...
内联块inline-block块下沉、多余的水平间隙垂直间隙的问题
小菜鸡程序媛的挣扎史
08-01 892
把导航设置为inline-block以后总是会多出4px的垂直间隙 序 display有几种属性： inline是内联对象，比如<a/> 、 <span/>标签等，可以“堆在一起”显示，宽高由内容决定，不能设置； block是块对象，比如<div/>、<p/>标签等，要占一整行，但是宽高可以自定义； 为了弥补inline和block的不足...
前端基础CSS
qq_44830580的博客
03-09 150
CSS概述 1.什么是css css:cascading style sheets 层叠样式表 2.作用 html：搭建网页的结构，承载页面的数据 css:美化页面，修饰标签 (亚洲4大邪术) 3.css和html属性的使用原则 html的属性只对当前标签有效，没有可重用性，导致没有可维护性 css 具备一定的代码重用性，提高了可维护性 但是css没有把重用性做到极致。使用scss可以做到极致 W3C建议使用css替代html属性，如果css无法替代的属性，就使用html属性就可以了 二...
多种方法解决多个div并排显示的问题
weixin_43912081的博客
08-15 1万+
平时做项目中总是能碰到让多个div显示在一排的问题 例如： 将上图显示为: 其实有很多种方法都可解决此问题 在这里做一下总结 一、使用 display 也就是说块元素占用了全部宽度，前后会带有换行符，会自动的在一行显示，而内联元素只需要设置宽度，不会带有换行符，也就是默认不换行 那么我们就可以考虑把 div 这种块元素转换为内联元素 即可实现 div 在一行显示，就可达到我们的目的 display有很多属性值 如下： none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对
html文字往右边偏移怎么做,div向右偏移设置 css让div靠右移必定距离
weixin_33621280的博客
06-23 1万+
转自：https://www.thinkcss.com/shili/1372.shtmlcssdiv对象盒子向右偏移设置，使用css让div靠右必定距离-div向右移教程实例篇htmldiv向右偏移必定距离，可采用margin外边距实现、也可使用padding来实现，这就要看不一样状况下如何灵活选择了。这里thinkcss为你们介绍各类css布局div向右移方法。布局 两个盒子前者是蓝色的div，...
Css 使div标签下沉到页面最低部
weixin_30295091的博客
10-27 866
.footer{ position:fixed; bottom:0; } 使用这两个标签就能达到效果 转载于:https://www.cnblogs.com/taidou/p/6003045.html
div内添加span标签后，div超过了长度 设置inline-block没用
最新发布
06-03
如果在 div 内添加 span 标签后，div 超过了长度，而设置 inline-block 没有用的话，可能是因为 span 标签的宽度超过了 div 的宽度，导致 div 的宽度被撑开了。你可以尝试设置 span 标签的宽度为 auto，或者使用 CSS...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值