Question

我需要在相邻的列中安排两组文本。在左边我想要一个跨越文本总高度的文本区域。在它的右侧，我想要至少三个文本区域，将左侧的文本分成较小的块。我把全文写成小块并没有任何问题。我的问题是关于如何安排html / javascript / css。我尝试了一种表结构，以便于将文本并排放置。欢迎任何建议。允许textareas在编辑后调整大小的代码的奖励。

以下是一些其他信息：文本区域必须是任意的。用户将在左侧文本框中粘贴至少3-4段文本。我希望左侧文本框的大小可以显示所有文本，而右侧文本框会在用户进行编辑时自行调整大小。但我事先并不知道最左边的文本区需要多大。

这是我最初的尝试（我希望小提琴的作品）： http://jsfiddle.net/jank0003/uape4twk/

这是HTML：

<table>
    <tr>
        <th>RightCol</th>
        <th>LeftCol</th>
    </tr>
    <tr>
        <td><textarea id="initialText">Initial Text</textarea></td>
        <td><textarea id="interText1">Intermediate Text 1</textarea></td>
    </tr>
    <tr>
        <td></td>
        <td><textarea id="interText2">Intermediate Text 2</textarea></td>
    </tr>
    <tr>
        <td></td>
        <td><textarea id="interText3">Intermediate Text 3</textarea></td>
    </tr>

</table>

Answer 1

http://jsfiddle.net/uape4twk/5/这是您正在寻找的吗？

编辑：

所以我要废弃上面的所有代码，因为你正在寻找与我原来编码不同的东西。我认为这更接近你想要的：http://jsfiddle.net/swm53ran/8/

我使用了bootstrap网格系统（响应）和一个单独的js插件elastic，它改变了左侧textarea的大小。你在上面说过，你想出了如何将文本分成三个部分，所以一旦完成，右边三个文本的大小应该与左边的大小相似。我只是在你看到视图后设置左侧textarea的初始大小。

<div class="col-md-12">
    <div class="row">
        <div class="col-xs-4">
            <textarea class="form-control" rows=7>This is some text</textarea>
        </div>
        <div class="col-xs-4">
            <div class="row">
                <div class="col-xs-12">
                    <textarea class="form-control">This is some text</textarea>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <textarea class="form-control">This is some text</textarea>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <textarea class="form-control">This is some text</textarea>
                </div>
            </div>
        </div>
    </div>
</div>

$('textarea').elastic();

Answer 2

试试这个：

＆＃13;

<table>
<tr>
    <th>LeftCol</th>
    <th>RightCol</th>
</tr>
<tr>
    <td rowspan="3" valign="top"><textarea id="initialText" rows="6">Initial Text</textarea></td>
    <td><textarea id="interText1" rows="2">Intermediate Text 1</textarea></td>
</tr>
<tr>
    <td><textarea id="interText2" rows="2">Intermediate Text 2</textarea></td>
</tr>
<tr>
    <td><textarea id="interText3" rows="2">Intermediate Text 3</textarea></td>
</tr>
</table>

＆＃13;

一个文本区域与多个较小的文本区域相邻？

2 个答案: