我的定位有什么问题? (包括 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
,我认为您可能已经更接近您想要的结果了。
这是我想要的 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
,我认为您可能已经更接近您想要的结果了。