html - 按钮的静态宽度，textarea 的静态宽度

Question

你好，我创建了两个 div，一个向左浮动(按钮)，宽度为 120px，另一个用于 textarea，textarea 应该是 margin-left: 20px 并休息的宽度。我尝试了多少，我无法实现这一目标。伙计们，你知道解决办法吗？

<div id="button" style="float: left; width: 120px; height: 80px;">
   <input type="button" id="button" value="something" />
</div>
<div id="textarea" style="margin-left: 20px;">
   <textarea id="message"></textarea>
</div>

Answer 1

(对于 IE8，使用 #ID 命名的 DIV 而不是 nth-child)
<强> DEMO

|-------- 120 ------| 20 |------可用空间---------------------------------------- ------------------>

<div id="formArea">
  <div>
   <input type="button" value="something" />
  </div>
  <div>
   <textarea></textarea>
  </div>
</div>

#formArea{
  display:table;
  width:100%;
}
#formArea>div{ 
  display:table-cell;
  vertical-align: top;
}
#formArea>div:nth-child(1){
  width:120px;
}
#formArea>div:nth-child(2){ 
  padding-left:20px;   /* instead of margin */
}
#formArea textarea{
  border:0;
  width:100%;
}

_{请记住，ID必须在每页中是唯一的。}