html - 如何制作 2 个柔性 block 和 1 个固定 block ？

Question

我有以下html代码

<div style="border: 1px solid #000; width: 700px; line-height: 38px; display: block">
    <div style="margin-left:10px;width: 222px; float: left; margin-right: 10px;">
        Enter your question
    </div>
    <div style="float: left; width: 390px;">
        <textarea style="width: 100%; height 30px;">yuor text here</textarea>
    </div>
    <div style="float: right; margin-left: 14px; margin-right: 5px;">
        <input type="button" value="Send">
    </div>
</div>

可是我不喜欢。我修复了第一个 block ，但其中的文本应该更改并且我可能会发生冲突。带有文本区域的 block 应该始终为 100%。带按钮的 block 应固定并位于右侧。

那么我怎样才能让第一个 block 也变得灵活呢？

EXAMPLE

Answer 1

删除所有 float 并使用 display: table;, display:table-cell;

display: table; compatibility list

working demo here

html, body {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
.first {
    width: 100%;
    display: table;
    vertical-align:middle;
    height:100%;
}
.question {
    width: 30%; /* fluid width */
    word-break:break-all; /* break long lines*/
    display:table-cell;
    vertical-align:middle; /* where should the text vertically position*/
}
.button {
    width:5%; /* fluid width */
    display:table-cell;
    vertical-align:top;/* where should the button vertically position*/
}
div.textarea {
    display:table-cell;
    width: 60%; /* fluid width */
    height:100%;
}
textarea {
    width: 98%;
    height:100%;
}

HTML

<div class="first">
    <div class="question"><b> fluid first block</b>
        <br />
        <br />Enter your question Enter your question Enter your question Enter your question Enter your question Enter your question Enter your question Enter your question</div>
    <div class="textarea">
        <textarea>your text here</textarea>
    </div>
    <div class="button">
        <input type="button" value="Send" />
    </div>
</div>