Question

我有两个内联块元素（一个<img>元素和一个<div>元素），而<div>元素正在向下推送<img>元素：{{ 3}}

以下是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：image of issue

注意：我已经研究了这个并尝试了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;
}

正如你所知，边距正在强制内联块元素旁边的大量空间，特别是对于div。你的左边有400px的边距......这意味着它们不适合同一个视觉行。通过更正边距，它们按预期方式对齐。

fiddle update

内联块向下移动其他内联块和垂直对齐：顶部不起作用

1 个答案: