与 inline-block 未对齐（其他元素被下推）

Posted 2023-02-16

【中文标题】与 inline-block 未对齐（其他元素被下推）

【英文标题】：Missalignment with inline-block (other elements pushed down)

【发布时间】：2011-12-28 13:26:24

【问题描述】：

我正在尝试将小盒子排列成一排。这些盒子每个都有 2 个元素。在某些情况下，第一个元素是如此“多”的文本，以至于它分成 2 行。如果发生这种情况，此特殊行中的所有其他块如下所示。

长话短说，这是一个例子： http://jsfiddle.net/PMRQ5/

如果您调整 html 字段的大小，您就会明白我的意思。有人可以帮忙吗？

.songlist .even 
  background: #c2e4fa;
  background: -moz-linear-gradient(top, #d9eefc, #c2e4fa);
  margin-right: 5px;

.songlist .odd 
  background: #faf4c2;
  background: -moz-linear-gradient(top, #fcf8d9, #faf4c2);
  margin-right: 5px;

.songlist .itemBox 
  font-size: 11px;
  width: 220px;
  min-height: 100px;
  clear: both;
  padding: 5px;
  margin: 5px 10px 5px 10px;
  display: inline-block;
  position: relative;
  border-radius: 4px;

.songlist .itemBox .title 
  font-weight: bold;
  font-size: 16px;

.songlist .itemBox .artist 
  clear: left;
  font-size: 11px;

.songlist .itemBox .titlerating 
  bottom: 10px;
  left: 10px;
  position: absolute;

.songlist .itemBox .dance 
  bottom: 5px;
  right: 10px;
  position: absolute;

<div class='songlist'>
  <div class='itemBox even'>
    <div class='cover'></div>
    <div class='title'>You and you</div>
    <div class='artist'>101 Strings Orchestra</div>
    <div class='clear'></div>
  </div>
  <div class='itemBox odd'>
    <div class='title'>The Queen's lace hankerchief waltz</div>
    <div class='artist'>101 Strings Orchestra</div>
    <div class='clear'></div>
  </div>
  <div class='itemBox even'>
    <div class='cover'></div>
    <div class='title'>Voices of spring</div>
    <div class='artist'>101 Strings Orchestra</div>
    <div class='clear'></div>
  </div>
  <div class='itemBox odd'>
    <div class='cover'></div>
    <div class='title'>Roses from the south</div>
    <div class='artist'>101 Strings Orchestra</div>
    <div class='clear'></div>
  </div>
</div>

【问题讨论】：

哎呀，您似乎使用了一种奇怪的值组合来获得这种效果。你想要的结果到底是什么？使用 inline-block 时，“元素的移动”是标准的。您是否希望它们在调整窗口大小时永远不会从顶行移动？

【参考方案1】：

.songlist .even 
  background:#c2e4fa;
  background:-moz-linear-gradient(top,#d9eefc,#c2e4fa);
  margin-right:5px;

.songlist .odd 
  background:#faf4c2;
  background:-moz-linear-gradient(top,#fcf8d9,#faf4c2);
  margin-right:5px;

.songlist .itemBox 
  font-size:11px;
  width:220px;
  min-height:100px;
  clear:both;
  padding:5px;
  margin:5px 10px 5px 10px;
  display:inline-block;
  position:relative;
  border-radius:4px;
  vertical-align: bottom;

.songlist .itemBox .title 
  font-weight:bold;
  font-size:16px;

.songlist .itemBox .artist 
  clear:left;
  font-size:11px;

.songlist .itemBox .titlerating 
  bottom:10px;
  left:10px;
  position:absolute;

.songlist .itemBox .dance 
  bottom:5px;
  right:10px;
  position:absolute;

<div class='songlist'>
    <div class='itemBox even'>
        <div class='cover'></div>        
        <div class='title'>You and you</div>
        <div class='artist'>101 Strings Orchestra</div>        
        <div class='clear'></div>
    </div>                    
    <div class='itemBox odd'>    
        <div class='title'>The Queen's lace hankerchief waltz</div>
        <div class='artist'>101 Strings Orchestra</div>        
        <div class='clear'></div>
    </div>
    <div class='itemBox even'>
        <div class='cover'></div>    
        <div class='title'>Voices of spring</div>
        <div class='artist'>101 Strings Orchestra</div>    
        <div class='clear'></div>
    </div>                    
    <div class='itemBox odd'>
        <div class='cover'></div>        
        <div class='title'>Roses from the south</div>
        <div class='artist'>101 Strings Orchestra</div>    
    <div class='clear'></div>
    </div>
</div>

【参考方案2】：

http://jsfiddle.net/PMRQ5/1/

将vertical-align: top 或vertical-align: bottom 添加到框中，取决于您想要什么。

【讨论】：

非常感谢 - 这是解决方案 :)

不起作用...您需要将vertical-align: top 添加到您要修复的元素中，而不是添加到容器中

这行得通，但是如果盒子的大小完全相同，为什么首先会发生呢？

@kajow7 如果您仍然想知道......因为内联块的行为不像块。它的作用有点像内联元素。内联块的默认对齐方式是“基线”，这有点不可预测。完整规范和示例：developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

能不能把相关代码添加到这里而不是只在JS小提琴链接中？