Question

我想为用户输入显示textarea，在其右侧我想显示指令文本。我希望说明文本使用文本区域旁边的可用宽度，我希望它的行必要时换行，但保留在textarea的右侧。我希望文字与文字区域对齐。

<div class="container">
  <textarea rows="10" cols="30">Text data</textarea>
  <div class="instructions">
    Please follow these instructions when entering data 
    into the textarea to the left. Blah blah blah..
  </div>
</div>

如何使用适用于大多数现代浏览器的HTML5和CSS3来实现这一目标？

编辑：也许我应该补充一点，我尝试将textarea和div.instructions设置为display: inline-block，但这还不够，因为div.instructions没有＆＃39}包裹。相反，当textarea右侧的可用空间太小而无法在单行上显示说明文字时，整个div.instructions会在textarea下方滑动。

JSFiddle：https://jsfiddle.net/0bh0mLej/

Answer 1

您可以使用display: table-cell：

<div class="container">
  <div style="display: table-cell">
      <textarea rows="10" cols="30">Text data</textarea>
  </div>
  <div style="display: table-cell; vertical-align: top;">
    Please follow these instructions when entering data 
    into the textarea to the left. Blah blah blah..
  </div>
</div>

Answer 2

＆＃13;

.form-block {
  display: table;
}
.f-align {
  display: table-cell;
  vertical-align: top;
  padding: 10px;
}

＆＃13;

<div class="container form-block">
  <div class="f-align">
    <textarea rows="10" cols="30">Text data</textarea>
  </div>
  <div class="f-align margin-left">
    Please follow these instructions when entering data into the textarea to the left. Blah blah blah..
  </div>
</div>

＆＃13;

我已根据需要编辑了您的代码。请检查希望这会有所帮助。

在textarea旁边自动调整文本宽度？

2 个答案: