html - 分区 float : right being pushed down to bottom

Question

在这个页面上，我有以下代码:

<div id="twitter">
    <div class="inner">
        <div class="twitter_div">
                            ...
            <span class="tweet-author">via <a href="https://twitter.com/WhiteWreath" title="WhiteWreath" target="_blank">WhiteWreath</a></span>
        </div>                      
    </div>
    <div class="facebook_div">
        <a href="https://www.facebook.com/WhiteWreath/" title="Follow us on Facebook"><img src="http://www.whitewreath.com/wp-content/uploads/2016/03/facebook-icon.png" alt="Follow us on Facebook" title="Follow us on Facebook"></a>
    </div>
</div>

我一直在尝试 float Facebook 图标 (.facebook_div)，使其与 .twitter_div 的右侧齐平并与 的顶部齐平>.twitter_div.

但是，它被向下推到 .twitter_div 底部的水平。

这是我使用的 CSS:

#header #twitter {width: 485px;}
.twitter_div {float: right; padding-right: 32px;}
.facebook_div {float: right;}

感谢帮助。 jsfiddle here .在 jsfiddle 上复制实时代码时遇到一些麻烦。

请注意:HTML 无法更改。

Answer 1

“颠倒的顺序”是预期的结果。

您可以在 CSS Specification for floats 中四处挖掘如果您愿意，但您的示例会按应有的方式呈现。

如果您希望它们以与标记相同的顺序显示，float the .inner to right , 及其 children (.twitter_div and . facebook_div) to left .

Fiddle for demo

更新的答案:

我查看了您提供的链接，以下是调查结果，

您必须将“width”添加到 twitter_div 并删除其“padding-right”。同时将“padding-top”添加到 facebook_div。

您可以添加 width:330px;到 twitter_div 和 padding-top:1em;到 facebook_div。它会将两个 div 彼此对齐