Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/41.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 混合文本和空div的CSS内联块换行问题_Html_Css_Display - Fatal编程技术网
Fatal编程技术网
  • html/
  • Html 混合文本和空div的CSS内联块换行问题

Html 混合文本和空div的CSS内联块换行问题

html css

Html 混合文本和空div的CSS内联块换行问题,html,css,display,Html,Css,Display,当设置display:inline block时，我遇到了divs（混合为空或与文本）的对齐问题。有关示例，请参见下图： 如您所见，带有文本的divs与divs的其余部分不一致。请参阅JSFiddle以了解我的问题的工作示例 我已经知道一些解决这个问题的方法，但我想知道为什么会发生这种情况。我的目标是用最少的CSS更改（可能没有HTML修改）来解决这个问题 HTML <div class="bar"> <div class="actors"> <div

当设置
display:inline block
时，我遇到了
div
s（混合为空或与文本）的对齐问题。有关示例，请参见下图：

如您所见，带有文本的
div
s与
div
s的其余部分不一致。请参阅JSFiddle以了解我的问题的工作示例

我已经知道一些解决这个问题的方法，但我想知道为什么会发生这种情况。我的目标是用最少的CSS更改（可能没有HTML修改）来解决这个问题

HTML

<div class="bar">
  <div class="actors">
    <div class="actor" style="background-image: url('http://lorempixel.com/32/32/')"></div>
    <div class="actor" style="background-image: url('http://lorempixel.com/32/32/')"></div>
    <div class="actor num"><span>5</span></div>
    <div class="actor" style="background-image: url('http://lorempixel.com/32/32/')"></div>
    <div class="actor num"><div>6</div></div>
  </div>
  <div class="lol">lol</div>
</div>
原因是
垂直对齐的默认值
，每个文本都有该值。它具有初始值
基线
，因此方向位于基线上

最简单、最智能的修复方法是将其设置为
vertical align:top：


.actor {
    vertical-align: top;
}


演示：
我更喜欢使用


.actor {
    vertical-align: middle;
 }


top在这里解决了您的问题，但它将所有问题推到了最前面。底部则相反。从技术上讲，它们在两种方式上都是一致的。那么，为什么不将它们放在实际的中间位置，以防止进一步的冲突呢


尝试为
内联块添加
垂直对齐：中间


.actor {
    vertical-align: middle;
 }