当浮动它时，按钮/分区出现在框外

Question

我创建了一个盒子，我试图将按钮浮动在盒子的右侧。当我这样做时，按钮出现在框的下方一半。我该如何解决这个问题？

这里是LINK

这就是我的CSS看起来像

.rightColumn {
    margin-bottom: 1em;
    border: 1px solid #D4D4D4;
    width:500px;
    border-radius: 10px 10px 0px 0px;
}
.button{float:right;}

应该看起来像

Title
Summary
            |Find out more|

Answer 1

删除＆＃34; br＆＃34;摘要后标记。但请记住，如果摘要内容会更大，按钮将会向下浮动，以避免此摘要内容的修复宽度。
如果您想要新行中的按钮，请将您的行高设置为您的要求。目前，盒子高度是默认值。

Answer 2

添加绝对位置

.button{float:right;position:absolute;} 

并输入＆＃34;按钮＆＃34;标记后＆＃34; img＆＃34;标签

<img src="http://placehold.it/350x100">
     <button class="button"><a href="#">Find out more</a></button>   

请参阅演示：http://jsfiddle.net/57sect09/5/

Answer 3

使用</button>更改</button>&nbsp;。浮动对象喜欢背后的东西。

Answer 4

我不知道这个问题，但我知道如何解决这个问题。当你在一些非浮动元素中浮动东西时出错了。你必须浮动父节点或者向它添加clearfix css。我的{{3 }} 这里是clearfix class css：

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}