Question

出于某种原因，我无法将我的图像定位到Twitter Feed的右侧。我把它定位在twitter feed的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>

Answer 1

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

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

Answer 2

为什么不使用花车？

.twitter-timeline {
    float: left;
}

#bannerArea {
    clear: left;
}

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

Answer 3

如果#twitterfeed为position:relative，则#drshow必须为position:absolute才能实现此目的。

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

CSS相对定位不起作用

3 个答案: