Question

我正在尝试将文本放在左侧，将一个按钮放在右侧，并将两个元素放在一个框内。

如何将按钮向右移动更多并控制定位。

这是我的jsfiddle：http://jsfiddle.net/3PTtv/46/

    <div id="wrapper-landing">
<div class="box-row">
    <div class="box-form-body">
            <h4>
                See What You're Missing<br>
Fill out our Form</h4>
    </div>
    <div class="box-form-button">
        <img src="http://www.ei.edu/wp-content/uploads/2013/03/button_submit.jpg" /></div>
    </div>
</div>

#wrapper-landing {
width: 916px;
margin: 0 auto 50px auto;
padding: 0;

}

.box-form-body {
float: left;
display: block;
width: 65%;
padding: 0 0 0 2em;
}

h4 {
font-size: 1.05em;
margin: 0 0 2px 0;
font-family: "HelveticaNeueW01-75Bold",Helvetica,"Helvetica Neue",Arial,sans-serif;
font-weight: normal;
}

.box-form-button {
float: left;
display: block;
margin-top: 5px;
width: 25%;
min-width: 215px;
}

.box-row {
width:100%;
    padding:10px;
    border:1px solid #e2e3e4;
    margin:0px;
    overflow: hidden;
    background-color:#f66511;
}

Answer 1

为此，您需要从.box-form-button元素中删除float: left

.box-form-button {
    display: block;
    margin-top: 5px;
    width: 25%;
    min-width: 215px;
}

这将使按钮出现在框中。然后，您必须将同一元素的display: block更改为display: inline，以便与其他元素一起显示行。

.box-form-button {
    display: inline;
    margin-top: 5px;
    width: 25%;
    min-width: 215px;
}

JSFiddle

Answer 2

当您将两个子元素浮动在框中时，该框不知道内容的高度。如果你想保留你的浮动元素，你可以将所谓的“clearfix”应用到你的父元素。

尝试添加以下样式：

.box-row:after {
    content: '';
    display: table;
    clear: both;
}

行动中：http://jsfiddle.net/chicgeek/3PTtv/38/

关于clearfix

应用clearfix有几种不同的方法（上面是我最喜欢的）。要了解有关clearfixes和实现它的替代方法的更多信息，请阅读以下内容：

Answer 3

将overflow: hidden;添加到.box-row样式将更正此问题。 http://jsfiddle.net/3PTtv/40/

.box-row 
{
    width:100%;
    padding:10px;
    border:2px solid gray;
    margin:0px;
    overflow: hidden;
}

如何将文字和按钮并排放在盒子里面

3 个答案:

关于clearfix