如何製作2個靈活塊和一個固定？

我有以下的HTML代碼如何製作2個靈活塊和一個固定？

<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

來源

2014-01-23 Dmitro

刪除所有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>

來源

2014-01-23 11:21:19 NoobEditor

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>

的

來源

2014-01-23 11:36:44 michael

如何製作2個靈活塊和一個固定？

回答

相關問題