div中加入内容会下沉

复现

有这样一个布局.

上半部分有三个div, 没有使用定位或浮动, 调整好布局后, 显示正常.

    <!-- 配置部分 --><div><!-- 展示部分 --><div class="configPart"><div class="showPart"><div class="showSelectDiv"><!-- <span>F&Q</span> --></div><svgt="1646033760309"class="icon"viewBox="0 0 2560 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="5116"width="128"height="128"><pathd="M2269.44 597.333333H0V426.666667h2269.44L1962.666667 107.690667 2067.370667 0l440.832 458.410667 51.797333 53.248-0.256 0.341333 0.256 0.341333-51.797333 53.248L2067.370667 1024 1962.666667 916.309333 2269.44 597.333333z"fill="#cdcdcd"p-id="5117"></path></svg><div class="showSelectDiv"></div><svgt="1646033760309"class="icon"viewBox="0 0 2560 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="5116"width="128"height="128"><pathd="M2269.44 597.333333H0V426.666667h2269.44L1962.666667 107.690667 2067.370667 0l440.832 458.410667 51.797333 53.248-0.256 0.341333 0.256 0.341333-51.797333 53.248L2067.370667 1024 1962.666667 916.309333 2269.44 597.333333z"fill="#cdcdcd"p-id="5117"></path></svg><div class="showSelectDiv"></div></div><!-- 按钮部分 --><div class="btnDiv"><el-button type="primary" round>F&Q</el-button><el-button type="primary" round>KG</el-button><el-button type="primary" round>TASK</el-button></div></div></div>

.configPart {padding: 20px 10px;margin: 0 auto;width: 1000px;border: 1px solid #ccc;.showPart {height: 128px;.showSelectDiv {display: inline-block;border: 1px dashed #ccc;width: 200px;height: 100px;margin: 14px 20px;}}
}

但是当在div中加入文字后, div下沉了.

原因

这里首先要关注一个属性 vertical-align: baseline;

vertical-align所有属性值：

baseline，top，middle，bottom，text-top，text-bottom

属性的作用范围：

vertical-align只对内联元素（或者display：inline-block的块级元素）有效，并根据父级元素的位置定位。

通俗来讲就是：此属性是为了确定此行内元素在他父级元素中的垂直距离

在没有定义的时候 vertical-align 默认值是 baseline ;行内元素会根据 vertical-align 来进行垂直方向的对齐；

一开始空 div 的 baseline 默认在底部，而有了文字之后就根据文字的 baseline 确定；而文字的 baseline又受到 font-size和 line-height属性的影响. 所以会导致div下沉.

解决

在div中加入:

vertical-align: top;

div中加入内容会下沉相关推荐

ajax点击更改div,jquery ajax双击div可直接修改div中的内容
jquery ajax双击div可直接修改div中的内容发布于 2017-04-03 17:26:16 | 127 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框 ...
div中让内容能不换行就尽量不换行.【纯原】
div中让内容能不换行就尽量不换行,部分左对齐,部分右对齐. <html><head><title>九歌·少司命</title><style ty ...
div中的内容水平居中显示
今天总结下几种div中的内容水平居中的几种方法,至于好坏我还不是很清楚,就不阐述,希望有大佬能指示下,小弟不胜感激 1.首先是常规的 margin属性,上下固定,左右自适应 <style> ...
jQuery获取div中的内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
学习使用CSS实现div中的内容垂直居中的方法
学习使用CSS实现div中的内容垂直居中的方法一.行高(line-height)法二.内边距(padding)法三.模拟表格法四.CSS3的transform来实现五:css3的box方法实 ...
div或者div中的内容居中对齐的方法
(1)div居中对齐的样式 style="margin-left:auto;margin-right:auto;" 或者简写为: style="margin:0 auto ...
如何将div中的内容垂直居中
如何将div中的内容垂直居中第一种方法: 在div里面添加:text-align:center; line-height: 60px; 这里的line-height是行高,这个根据你的div的高度要 ...
div中的内容水平垂直居中
1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...
清空div中的内容而不刷新整个页面_Vue中的$nextTick机制
nextTick 出现的前提因为Vue是异步驱动视图更新数据的,即当我们在事件中修改数据时,视图并不会即时的更新,而是等在同一事件循环的所有数据变化完成后,再进行视图更新.类似于Event Loop ...

div中加入内容会下沉

复现

原因

解决

div中加入内容会下沉相关推荐

最新文章

热门文章