html - 如何使两个图像保持相对？

Question

我想将底部的两个 Logo 连接在一起，使它们相对于文本处于相同的位置。

我更喜欢某种解释以及代码，以便我可以从中学习。

相关的 HTML:

<div id="twitterdiv"><img id="twitter" src="images/Twitter_white.png" ></div>
<div id="instagramdiv"><img id="instagram" src="images/instagram_white.png"></div>

相关 CSS:

#instagramdiv {
    right: 50%;
    position: absolute
}

#twitterdiv {
    position: absolute;
    right: 55%;
}

Answer 1

这里绝对定位的元素可以解决问题。事实上，这是一个典型的情况，当一个元素必须相对于其他元素定位时，例如“粘性”。请记住绝对位置的定义“元素相对于其第一个定位的(非静态的)祖先元素定位”，您需要做的就是将“l”字母和图像包装在同一个容器(父级)中，然后给出父容器相对位置和您的图像 - 绝对位置，最后设置左侧和顶部属性(如果需要):jsfiddle

<div>app<span class="parentContainer">l
    <div class="positionedContainer">
                <img id="twitter" src="images/Twitter_white.png"/>
                <img id="instagram" src="images/instagram_white.png" />         
         </div>
    </span>
elemontomato</div>