我的内联块元素排列不正确

.track-container所有元素都应该排列好,并排排列,每个并排排列,受限于200px的高度,没有奇怪的边距或填充。 相反,你有上述小提琴中出现的奇怪。

是什么导致.album-artwork.track-info被推到页面的一半,我该如何解决? 另外,我承认一个表可能是一个更好的方法来处理这个整个设置,但我想从上面的代码中找出问题,所以我可以从这个错误中学习。

 .track-container { padding:0; width: 600px; height: 200px; border: 1px solid black; list-style-type: none; margin-bottom: 10px; } .position-data { overflow: none; display: inline-block; width: 12.5%; height: 200px; margin: 0; padding: 0; border: 1px solid black; } .current-position, .position-movement { height: 100px; width: 100%; margin: 0; padding: 0; border: 1px solid black; } .album-artwork { display: inline-block; height: 200px; width: 20%; border: 1px solid black; } .track-info { display: inline-block; padding-left: 10px; height: 200px; border: 1px solid black; } 
 <div class="track-container"> <div class="position-data"> <div class="current-position">1</div> <div class="position-movement">2</div> </div> <div class="album-artwork">fdasfdsa</div> <div class="track-info">fdafdsa</div> </div> 

这是一个JSFiddle 。

5 Solutions collect form web for “我的内联块元素排列不正确”

10.8线高计算:“线高”和“垂直alignment”属性

“内联块”的基线是正常stream程中最后一个线框的基线,除非其中没有stream入线框或“溢出”属性的计算值不是“可见”,否则这种情况下的基线是底部边缘。

这是一个涉及inline-block元素的常见问题。 在这种情况下, vertical-align属性的默认值是baseline 。 如果您将值更改为top ,它将按预期行事。

更新示例

 .position-data { vertical-align: top; } 

.track-container中的元素是同一个.track-container的内联 框 。

因此,它们的垂直alignment由vertical-align属性指定:

此属性影响由行内级元素生成的框的行框内的垂直定位。

默认情况下,它的值是baseline

将框的基线与父框的基线alignment。 如果该框没有基线,请将底部边缘与父母的基线alignment。

在这种情况下,他们都有基线,这是根据计算

“内联块”的基线是正常stream程中最后一个线框的基线,除非其中没有stream入线框或“溢出”属性的计算值不是“可见”,否则这种情况下的基线是底部边缘。

以下图片说明发生了什么(红线是基线):

在这里输入图像描述

所以,你可以

  • 更改元素的垂直alignment,例如,更改为topmiddlebottom

     .track-container > * { vertical-align: middle; } 
     .track-container { padding: 0; width: 600px; height: 200px; border: 1px solid black; list-style-type: none; margin-bottom: 10px; } .position-data { overflow: none; display: inline-block; width: 12.5%; height: 200px; margin: 0; padding: 0; border: 1px solid black; } .current-position, .position-movement { height: 100px; width: 100%; margin: 0; padding: 0; border: 1px solid black; } .album-artwork { display: inline-block; height: 200px; width: 20%; border: 1px solid black; } .track-info { display: inline-block; padding-left: 10px; height: 200px; border: 1px solid black; } .track-container > * { vertical-align: middle; } 
     <div class="track-container"> <div class="position-data"> <div class="current-position">1</div> <div class="position-movement">2</div> </div> <div class="album-artwork">fdasfdsa</div> <div class="track-info">fdafdsa</div> </div> 

您需要为这两个元素添加vertical-align:top:

 .album-artwork, .track-info { vertical-align:top; } 

jsFiddle的例子

默认的垂直alignment是基线,但是您正在寻找顶部。

或者你可以设置float:left; 到3个元素。

http://jsfiddle.net/fC2nt/

确保你试图alignment的所有元素的行高比都是一样的。 如果您使用DIV,P,H1-5,DT,DD,INPUT,BUTTON标签的混合,这也会导致垂直alignment的不规则性,这取决于您在别处已经定义的内容。

  • 如何在HTML工具提示中使用回车?
  • 我应该使用JavaScript中的window.navigate或document.location?
  • <button>与<inputtypes=“button”/>。 使用哪个?
  • 使用BeautifulSoup来查找包含特定文本的HTML标签
  • 我怎样才能让同一个div中的两个button之间的空间?
  • Html有序列表1.1,1.2(嵌套计数器和范围)不起作用
  • 为每个TD提供自定义类的样式 - Datatables&jQuery
  • 使用JavaScript获取选项文本/值
  • HTML:表单之外的“标签”的最佳标签
  • Z-INDEX的最小值和最大值
  • 如何在Google Chrome检查器中插入HTML元素?