Html Div float：右下压到底部

在此页面上，我有以下代码：

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

谢谢你的帮助。在JSFIDLE上复制实时代码有点困难

请不要：HTML无法更改。

此代码将帮助您

我已经更新了你的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>

此代码将帮助您

我已经更新了你的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>

---

您正在使用

它是一个块级别的元素，因此无论何时您都将使用它。它将占用整行，您将在下一行使用它

将转到下一行解决此问题有不同的方法最简单的方法是使用

第二次标记，而不是

是一个内联元素

Float:right

适用于您

您正在使用的

它是一个块级元素，因此无论何时都可以使用它。它将占用整行，您将在下一行使用它

将转到下一行解决此问题有不同的方法最简单的方法是使用

第二次标记，而不是

是一个内联元素

Float:right

将适用于您

“倒序”是预期的结果

如果愿意，您可以在中进行深入研究，但是您的示例呈现出它应该呈现的样子

如果希望它们以与标记相同的顺序显示，

将.inner向右浮动

，将其

子项（.twitter\u div和.facebook\u div）向左浮动

更新答案：

我查看了您给定的链接，以下是调查结果

你必须在twitter_div中添加“width”并删除它的“padding right”。同时在facebook_div中添加“padding top”

---

您可以添加

宽度：330px到twitter_div和
填充顶部：1em
到facebook_div。它会将两个div相邻对齐
，这样“颠倒顺序”就是预期的结果

如果愿意，您可以在中进行深入研究，但是您的示例呈现出它应该呈现的样子

如果希望它们以与标记相同的顺序显示，
将.inner向右浮动
，将其
子项（.twitter\u div和.facebook\u div）向左浮动


更新答案：

我查看了您给定的链接，以下是调查结果

你必须在twitter_div中添加“width”并删除它的“padding right”。同时在facebook_div中添加“padding top”

您可以添加
宽度：330px到twitter_div和
填充顶部：1em
到facebook_div。它将使两个div彼此相邻对齐
不太清楚您的场景，但以下是可能的解决方案：

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

示例：
不太清楚您的场景，但以下是可能的解决方案：

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

示例：
谢谢Jayant。更新了我的问题：HTML无法更改，谢谢。如果您使用的是
float:right
您必须将facebook div放在文本Thank Jayant之前。更新了我的问题：HTML无法更改，谢谢。如果您使用的是
float:right
您必须将facebook div置于文本Mirza之前，
元素可以具有宽度属性，这意味着它不会占用整行。：-）是的，你是对的，但是在没有宽度的更一般的概念中，它会占用整行。好吧，但我的示例使用宽度，所以当特定示例不需要它时，谈论一般概念是不明智的。不正确的Mirza，
元素可以有一个width属性，这意味着它不会占用整行。：-）是的，你是对的，但是在没有宽度的更一般的概念中，它会占用整个赛道，好吧，但我的例子是使用宽度，所以当具体的例子不需要时，谈论一般概念是不明智的。谢谢Mazzu。我已经这样做了，但是从表面上看效果有点不同。史蒂夫，你能分享一下实际的链接吗？好的！史蒂夫：你已经在twitter_div中添加了“width”，并删除了它的“padding right”。还可以将“padding top”添加到facebook_div。您可以将“width:330px；”添加到twitter_div，并将“padding top:1em”添加到facebook_div。这将使两个div相邻对齐。我已经这样做了，但是从表面上看效果有点不同。史蒂夫，你能分享一下实际的链接吗？好的！史蒂夫：你已经在twitter_div中添加了“width”，并删除了它的“padding right”。还可以将“padding top”添加到facebook\u div。您可以将“width:330px；”添加到twitter\u div，并将“padding top:1em”添加到facebook\u div。这将使两个div相邻对齐