Question

如何让两个textareas动态填充指定的空间。在真实页面上，第二个textarea不会换行，所以它的宽度无关紧要。但是，我如何才能将数字框放大到最长数字所需的确切宽度？

#container{
  width:250px;
  border:1px solid black;
}
textarea{
  float:left;
  height:150px;
  font-family:monospace;
  text-align:right;
}
#t1{
  width:auto;
  min-width:10px;
  max-width:50px;
  margin-right:4px;
}
#t2{
}

width:auto似乎不起作用。我对min-width和max-width的实验也是徒劳的。

JSBIN

Answer 1

尝试使用宽度为百分比的box-sizing: border-box：

textarea {  
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
}

删除#t1和#t2的特定样式，您可以根据需要为每个样式指定宽度，总计达到100％。

更新了jsbin：http://jsbin.com/udeLafO/19/edit

textarea不会扩展为包含内容

1 个答案: