textarea的填充remaing宽度
我具有含<img>
和<textarea>
这样的<div>
:textarea的填充remaing宽度
<div style="width: 50%">
<img />
<textarea>...</textarea>
</div>
<img>
具有可变的宽度。如何使textarea fillup剩余空间?
谢谢!
您可以使用display: table-cell
和帮助实现这一目标,像这样:
HTML
<div class="container">
<div class="containerRow">
<div class="imageContainer">
<img href="[your_image_address]" alt="[your_image_alt]" />
</div>
<div class="textareaContainer">
<textarea>[your_textarea_content]</textarea>
</div>
</div>
</div>
CSS
.container {
display: table;
width: 100%;
}
.containerRow {
display: table-row;
}
.imageContainer {
display: table-cell;
vertical-align: top;
width: 1px;
}
.textareaContainer {
display: table-cell;
vertical-align: top;
}
.textareaContainer textarea {
width: 100%;
}
确保应填写空间的父母和子女使用width:100%
,这与父容器相关。所以<textarea>
需要被定义为具有100%的宽度以及图像。同样,他们需要定义为display:inline
或inline-block
与block
,以便它们彼此相邻。另一种选择是使用CSS表:<div>
与display:table
,<div>
与display:table-row
,然后用display: table-cell
对于具有<image>
和<textarea>
列<span>
;分别。这将适合这些元素到CSS表格中,如果将其定义为宽度:100%将填充其父项。
演示文稿值1000字。尝试http://jsfiddle.net/或http://codepen.io/ – cimmanon 2013-02-25 00:28:01
这个答案是正确的,通过这个链接证明。我需要尝试jsfiddle来演示事情,以便更具体地展示这样的事情。 – 2013-02-25 20:48:38
您可以尝试为图像设置百分比宽度,为文本区域设置另一个百分比宽度。 – 2013-02-25 00:26:26
是的,但是为图片设置一个百分比宽度会使图片变形... – John 2013-02-25 00:29:06