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>

我一直试图浮动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

反转顺序＆＃39;是预期的结果。

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

如果您希望他们按照与标记相同的顺序显示float the .inner to right及其children (.twitter_div and . facebook_div) to left。

<强> Fiddle for demo

更新答案：

我查看了您的指定链接，下面是调查结果，

你必须添加＆＃34;宽度＆＃34;到twitter_div并删除它的＆＃34; padding-right＆＃34;。还要添加＆＃34; padding-top＆＃34;到facebook_div。

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

Answer 2

此代码可以帮助您link

我已经更新了你的html内容和css到它

<div id="twitter">

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

CSS文件

    .twitter_div {float: right; padding-right: 32px;}
.facebook_div {float: right;}
#twitter{float: left;width: 100%;}

Answer 3

您正在使用<div>它是一个块级元素，所以当您使用它时。它会在下一行<div>上使用整行。下一行会有不同的方法来解决这个问题最简单的方法是第二次使用<span>标记而不是<div>。 <span>是内联元素Float:right适合您

Answer 4

不太清楚您的情况，但这是可能的解决方案：

.inner { float:right; }
.facebook_div { float: right; }
.twitter_div { display:inline-block; padding:5px 10px 0 0; }

示例：Rails guide

Div float：右侧被推到底部

4 个答案: