我有以下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 也变得灵活呢?
最佳答案
删除所有 float
并使用 display: table;
, display:table-cell;
display: table;
compatibility list
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>
关于html - 如何制作 2 个柔性 block 和 1 个固定 block ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21304530/