如何更改HTML元素的位置？

Question

这是代码：

    <div id="txtSelectedEmails">
    </div>
    @Html.TextBox("SubjectTextArea", string.Empty, new { id = "txtMailSubject", placeholder = "Subject" })
    @Html.TextArea("MessageTextArea", string.Empty, new { id = "txtMessageArea", placeholder = "Message" })
    @Html.Button("Send", new { onclick = "SendMessage()" })
</div>

这是css代码：

/* Styles for div with selected emails
-----------------------------------------------------------*/
#txtSelectedEmails
{
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    font: medium -moz-fixed;
    overflow: auto;
    padding: 2px;
    border: 1px solid #ddd;
    -webkit-appearance: textarea;
    margin-bottom: 1px;
    width: 732px;
    height: 50px;
    float: right;
}


/* Styles for mail subject Textbox
-----------------------------------------------------------*/
#txtMailSubject
{
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    font: medium -moz-fixed;
    overflow: auto;
    padding: 2px;
    border: 1px solid #ddd;
    -webkit-appearance: textarea;
    margin-bottom: 1px;
    width: 732px;
    height: 20px;
    float: right;
}

/* Styles for message TextArea
-----------------------------------------------------------*/
#txtMessageArea
{
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    font: medium -moz-fixed;
    overflow: auto;
    padding: 2px;
    border: 1px solid #ddd;
    -webkit-appearance: textarea;
    margin-bottom: 1px;
    width: 732px;
    height: 200px;
    float: right;
}

此代码生成此设计：

我希望按钮发送显示在消息文本框下方？ 我该如何实施呢？

提前谢谢。

Answer 1

现在，您的所有文本字段都具有属性float: right;，但您的按钮却没有。当按钮本身具有float: right;时，将按钮放在也包含float: left;的容器中应该可以解决问题。

您还需要使用按钮将clear: both;添加到容器中，以便按钮位于文本字段下方。

以下是您可以执行的操作示例（显示容器的彩色背景以及如何使用float）： http://jsfiddle.net/1fp8rrgo/

您还可以使用像素对按钮的位置进行硬编码，这不是首选。