html - 内联 block 向下移动其他内联 block 并垂直对齐 : top not working

Question

我有两个行内 block 元素(一个 <img> 元素和一个 <div> 元素)和一个 <div>元素正在插入 <img>像这样向下元素:image of issue

这是CSS中的相关代码:

#audio-section #audio-links li img {
    width: 46%;
    margin-right: 80%;
    height: 100%;
    margin: 5% 78% 2% 4%;
    display: inline-block;
    vertical-align: top;
}

#audio-section #audio-links li #responsive-audio-text {
    display: inline-block;
    width: 45%;
    margin: 100px 0px 0 400px;
    float: right;
}

和 HTML(在 <img> 标签内有 <a>):

<section id="audio-section">
            <ul id="audio-links">
                <li>
                    <div id="responsive-audio-text">
                        <h6>AuraPlus[+]</h6>
                        <p>Mixed by:<br>
                            Composed by:<br>
                            Tracks:<br>
                        </p>
                    </div>
                    <a href="https://soundcloud.com/rapfavs/sets/coloringbook" target="_blank"><img src="http://images.complex.com/complex/image/upload/t_article_image/chance-the-rapper-coloring-book-cover_gpzfqr.jpg" alt="DO LATERRR"></a>
                </li>
            </ul>

此外，这是更新后的 jsfiddle:https://jsfiddle.net/30go7uvz/6/

注意:我对此进行了研究并尝试了 vertical-align: top(因为这是对同一问题和其他几个问题的常见答案)。但是，这没有用。也许我用错了，或者还有其他原因导致它不起作用？此外，申请 position: absolute到文本修复了这个问题，但这不可行，因为它在滚动时显示在标题上。任何帮助将不胜感激。

Answer 1

调整您的边距属性:

#audio-section #audio-links li img {
    width: 46%;
    height: 100%;
    margin: 5% 0 2% 4%;
    display: inline-block;
    vertical-align: top;
}

#audio-section #audio-links li #responsive-audio-text {
    display: inline-block;
    width: 45%;
    margin: 100px 0px 0 0;
    float: right;
}

如您所见，边距迫使行内 block 元素旁边留出大量空间，尤其是对于 div。你在它的左边有 400px 的边距....这意味着它们不适合在同一个可视行中。通过更正边距，它们按预期对齐。

fiddle update