CSS相对定位不起作用答案

【问题标题】：CSS Relative Positioning Not WorkingCSS相对定位不起作用
【发布时间】：2020-08-24 16:20:06
【问题描述】：

由于某种原因，我无法将我的图片放置在 Twitter 提要的右侧。我将它相对定位在 twitter 提要的 DIV 标签内，但它仍然位于下方。这是实时链接：http://www.lymemd.org/indexmm6.php

我的 CSS：

#twitterfeed {
    position: relative;
}

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

我的 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>

【问题讨论】：

标签： html css css-position

【解决方案1】：

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

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

【讨论】：

做到了，谢谢。你知道它为什么需要它吗？对 CSS 来说非常新，不清楚为什么它需要显示“内联”属性来更改它。这是什么意思？
只想回答 Eric 的评论。块元素总是从一个新行开始并占据整个宽度，（参见w3schools.com/html/html_blocks.asp）。行内块元素不开始换行，并且允许元素位于它们的任一侧。见stackoverflow.com/questions/9189810/…

【解决方案2】：

为什么不使用浮点数？

.twitter-timeline {
    float: left;
}

#bannerArea {
    clear: left;
}

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

【讨论】：

感谢您的回答。我认为浮动是正确的方法。但是，现在我在这里：lymemd.org/indexmm6.php 我如何将音频播放器定位在图像下方并将它们都居中在 twitter 提要的右侧？我需要为所有内容制作 DIV 吗？提前感谢您的帮助！
首先，您可以将播放器和图像封装到一个 div 中（您已经拥有 #drshow）。在该 div 上，您将应用 text-align: center;，在 HTML 中，我将在图像后添加 <br />。但是，如果图片高度高于推特提要的高度，播放器会在页面居中，而不是在图片正下方。
感谢您的帮助，成功了！现在我的下一步是将整个#BannerArea 分成两个单独的部分......不确定这会证明多么简单。

【解决方案3】：

如果#twitterfeed 是position:relative，#drshow 必须是position:absolute 才能实现这一点。

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

【讨论】：