我的定位有什么问题? (包括 jsfiddle)

What is wrong with my positioning? (jsfiddle included)

这是我想要的 VS 我拥有的:

https://jsfiddle.net/fs0vydgd/

    <div class="left-align">
  <div class="songListContainer">

<div id="outerBoundingBox">

    <img src="https://s-media-cache-ak0.pinimg.com/736x/ec/8d/bc/ec8dbcafb4aad7d54bbae197867c6c7c.jpg" class="albumArt" />

    <div class="songTitle"><a href="">Artist</a> - <a href="">Song name here</a></div>

    <div class="songDetails"><a href="">Year: 2002</a>  <a href="">Genre: Punk</a> <a href="">Album: Title</a></div>

    </`div`></`div`></`div`>

我正在尝试重新创建我很久以前使用过的旧网站。我还有布局的屏幕截图,您可以看到。专辑封面图像显示完美,但带有歌曲描述的文本行没有正确对齐。即使手动分配边距也被证明是不成功的。我的猜测是我的 parent/child 设置在使用 display:inline-block 的方式上有问题,但我尝试了多种组合都没有成功。

这是一个很难提出的问题,在屏幕截图和提供的 JSfiddle 中有更好的说明。

感谢您的帮助,我无法找到有关此特定案例的信息。

首先将 float: left 添加到 .albumArt,我认为您可能已经更接近您想要的结果了。

Fiddle