Html 如何制作2个柔性块和1个固定块？_Html_Css

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

html css

Html 如何制作2个柔性块和1个固定块？,html,css,Html,Css,我有以下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 st

我有以下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>


输入您的问题
这里有你的短信吗

但是我不喜欢它。我修复了第一个块，但这个块中的文本应该会改变，我可以得到碰撞。带文本区域的块应始终为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>


流体第一块



输入您的问题输入您的问题输入您的问题输入您的问题输入您的问题输入您的问题输入您的问题输入您的问题输入您的问题
你的文字在这里
Flexbox？我的示例可能需要IE早期版本的其他供应商前缀


弯曲试验
* {
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
形式{
背景色：#d1d1；
显示：-webkit flex；
显示：-moz flex；
显示：-ms flex；
显示器：flex；
}
表格>分区{
填充：10px；
}
表单>。灵活{
-webkit-flex:1；
-moz-flex:1；
-ms-flex:1；
弹性：1；
}
表单>.fixed{
宽度：100px；
}
表格标签{
显示：块；
文本对齐：右对齐；
}
表单文本区{
宽度：100%；
}
输入您的问题

<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>

<!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>