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>

但我不喜欢它。我修复了第一个块，但是文本应该改变，我可以得到冲突。使用textarea的块应始终为100％。带按钮的块应固定并位于右侧。

那么我怎样才能使第一块灵活？

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>

Answer 2

Flexbox的？我的示例可能需要其他供应商前缀用于早期版本的IE

JS Fiddle demo here

<!DOCTYPE html>
<html>
    <head>
        <title>Flex Test</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <style>
        * {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        form {
            background-color: #d1d1d1;

            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: flex;
        }

        form > div {
            padding: 10px;
        }

        form > .flexible {
            -webkit-flex: 1;
            -moz-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }

        form > .fixed {
            width: 100px;
        }

        form label {
            display: block;
            text-align: right;
        }

        form textarea {
            width: 100%;
        }
        </style>
    </head>

    <body>
        <form>
            <div class="flexible">
                <label for="input-textarea">Enter your question</label>
            </div>
            <div class="flexible">
                <textarea id="input-textarea" placeholder="Your text here"></textarea>
            </div>
            <div class="fixed">
                <input type="button" value="Send">
            </div>
        </form>
    </body>
</html>

如何制作2个柔性块和一个固定块？

2 个答案: