我的定位有什么问题？ （包括jsfiddle）

Question

这就是我想要的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`>

我正在尝试重新创建一个我很久以前工作的旧网站。我仍然有你可以看到的布局截图。专辑艺术图像显示完美，但带有歌曲描述的文本行不适当排列。甚至手动分配边距也证明是不成功的。我的猜测是我的父/子设置有问题，就像我使用display：inline-block一样，但是我尝试了多种组合没有成功。

这是一个难以理解的问题，在截图和JSfiddle提供的内容中有更好的说明。

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

Answer 1

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

Fiddle