CSS相对定位不起作用

Question

由于某种原因，我无法使我的图像位于Twitter动态消息的右侧。虽然我在Twitter动态消息的DIV标签中设置了相对定位，但它仍然位于下方。这是现场链接：http://www.lymemd.org/indexmm6.php 我的CSS：

#twitterfeed {
    position: relative;
}

#drshow {
    position: relative;
    left: 200px;
}

My HTML:

<div id="twitterfeed">
<a class="twitter-timeline" width="460" height="250"  href="https://twitter.com/Lyme_MD" 
data-widget-id="453198382664667137">Tweets by @Lyme_MD</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s); js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<div id="drshow">
<img src="images/drshow.gif" alt="Diane Rehm Show Image" width="169" height="145">
</div>

</div>

- Eric

Answer 1

添加 display:inline-block 似乎可以解决这个问题：

#drshow { position: relative; display:inline-block }

- potashin

---

搞定了，谢谢。你知道为什么需要那个吗？我对CSS很陌生，不太清楚为什么需要display "inline"属性来改变它。这是什么意思？ - Eric

只是想回答Eric的评论。块级元素总是从新行开始并占据整个宽度，（请参见https://www.w3schools.com/html/html_blocks.asp）。内联块级元素不会开始新行，并允许在它们两侧放置元素。请参见https://dev59.com/XGox5IYBdhLWcg3weUGe。 - bluesixty

Answer 2

为什么不使用浮动布局？

.twitter-timeline {
    float: left;
}

#bannerArea {
    clear: left;
}

不确定您是否想要清除#bannerArea，但这是一个开始！一个主要的优势是如果访问者的屏幕太窄以至于无法水平显示两个元素，则布局将自动调整。您还可以将浮动应用于其他主要元素，而无需担心相对或绝对定位。

- Sunny Patel

---

谢谢你的回答。我认为浮点数是正确的选择。然而，现在我在这里：http://www.lymemd.org/indexmm6.php我该如何将音频播放器定位在图像下方，并将它们都居中到 Twitter 动态的右侧？我需要为所有内容创建 DIV 吗？非常感谢您的帮助！ - Eric

首先，您可以将播放器和图像封装到单个div中（您已经有了＃drshow）。在该div上，您将应用text-align:center;，并且在HTML中，我会在图像后添加<br />。但是，如果图像高度变得比Twitter动态消息的高度更高，则播放器将居中于页面上，而不是直接位于图像下方。 - Sunny Patel

谢谢你的帮助，有效了！现在我的下一步是将整个 #BannerArea 分成两个独立的部分...不确定这会有多复杂。 - Eric

Answer 3

如果 #twitterfeed 是 position:relative，那么 #drshow 必须是 position:absolute 才能实现此效果。

#drshow {
    position: absolute;
    top: 0px;
    left: 30px;
}

- ramesh