使两个文本区域并排共享一个灵活的边框

Question

我想并排制作两个文本区域，它们共享相同的边框。然后我们可以拖动边框并改变它们的宽度，同时保持它们的宽度总和不变。换句话说，它就像JSBin里面的面板。

有人知道如何实现吗？

PS：这里是并排制作两个固定文本区域的代码：

<!DOCTYPE html>
<html>
<head>
  <title>JS Bin</title>
</head>
<body>
  <textarea name="t1"></textarea>
  <textarea name="t2"></textarea>   
</body>
</html>

编辑1：以下代码来自JSBin的index.html。但是我没有看到它是如何设法实现共享边界的：

  <div id="panelswaiting">
    <div class="code stretch html panel">
      <div role="menubar" class="label menu" tabindex="0"><span class="name"><strong><a href="#htmlprocessors" role="menuitem" class="fake-dropdown button-dropdown">Processor</a></strong></span><div class="dropdown" id="htmlprocessors">
          <div role="menu" aria-hidden="true" class="dropdownmenu processorSelector" data-type="html">
            <a role="menuitemradio" aria-checked="true" href="#html" data-label="HTML">HTML</a>
            <a role="menuitemradio" href="#markdown">Markdown</a>
            <a role="menuitemradio" href="#jade">Jade</a>
            <a href="#convert">Convert to HTML</a>
          </div>
        </div>
      </div>
      <div class="editbox">
        <textarea aria-label="HTML Code Panel" spellcheck="false" autocapitalize="none" autocorrect="off" id="html"></textarea>
      </div>
    </div>
    <div class="code stretch javascript panel">
      <div role="menubar" class="label menu" tabindex="0"><span class="name"><strong><a role="menuitem" class="fake-dropdown button-dropdown" href="#javascriptprocessors">Processor</a></strong></span>
        <div class="dropdown" id="javascriptprocessors">
          <div role="menu" aria-hidden="true" class="dropdownmenu processorSelector" data-type="javascript">
            <a role="menuitemradio" aria-checked="true" href="#javascript" data-label="JavaScript">JavaScript</a>
            <a role="menuitemradio" href="#babel">ES6 / Babel</a>
            <a role="menuitemradio" href="#jsx">JSX (React)</a>
            <a role="menuitemradio" href="#coffeescript">CoffeeScript</a>
            <a role="menuitemradio" href="#traceur">Traceur</a>
            <a role="menuitemradio" href="#typescript">TypeScript</a>
            <a role="menuitemradio" href="#processing">Processing</a>
            <a role="menuitemradio" href="#livescript">LiveScript</a>
            <a role="menuitemradio" href="#clojurescript">ClojureScript</a>
            <a role="menuitem" href="#convert">Convert to JavaScript</a>
          </div>
        </div>
      </div>
      <div class="editbox">
        <textarea aria-label="JavaScript Code Panel" spellcheck="false" autocapitalize="none" autocorrect="off" id="javascript"></textarea>
      </div>
    </div>
    ...
  </div>

编辑 2：

根据Ankit vadariya的回答，我做了a minimum case...只剩下一件事：如何保证.panel-right的min-width？目前好像不行...

一种方法是设置max-width of .panel-left，但是如果我们看JSBin，每个面板没有max-width的限制，而有min-width...

Answer 1

Here is the your solution

希望它对你有用。

代码

$(".panel-left").resizable({
   handleSelector: ".splitter",
   resizeHeight: false
 });

 $(".panel-top").resizable({
   handleSelector: ".splitter-horizontal",
   resizeWidth: false
 });

CSS

html,
body {
  height: 100%;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  padding: 0;
  margin: 0;
  overflow: auto;
}

.page-container {
  margin: 20px;
}


/* horizontal panel*/

.panel-container {
  display: flex;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;

  /* avoid browser level touch actions */
  xtouch-action: none;
}

.panel-left {
  flex: 0 0 auto;
  /* only manually resize */
  padding: 10px;
  width: 300px;
  min-height: 200px;
  min-width: 150px;
  white-space: nowrap;
  background: #838383;
  color: white;
}

.splitter {
  flex: 0 0 auto;
  width: 18px;  
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
  min-height: 200px;
  cursor: col-resize;  
}

.panel-right {
  flex: 1 1 auto;
  /* resizable */
  padding: 10px;
  width: 100%;
  min-height: 200px;
  min-width: 200px;
  background: #eee;
}


/* vertical panel */

.panel-container-vertical {
  display: flex;
  flex-direction: column;
  height: 500px;
  border: 1px solid silver;
  overflow: hidden;
}

.panel-top {
  flex: 0 0 auto;
  /* only manually resize */
  padding: 10px;
  height: 150px;
  width: 100%;
  white-space: nowrap;
  background: #838383;
  color: white;
}

.splitter-horizontal {
  flex: 0 0 auto;
  height: 18px;
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png) center center no-repeat #535353;
  cursor: row-resize;
}

.panel-bottom {
  flex: 1 1 auto;
  /* resizable */
  padding: 10px;
  min-height: 200px;
  background: #eee;
}

label {
  font-size: 1.2em;
  display: block;
  font-weight: bold;
  margin: 30px 0 10px;
}

pre {
  margin: 20px;
  padding: 10px;
  background: #eee;
  border: 1px solid silver;
  border-radius: 4px;
  overflow: auto;
}

HTML

<html>
<head>
    <title>Simple Split Panels - jquery-resizable</title>
    <meta charset="utf-8"/>
</head>
<body style="">
    <div class="page-container">

        <h1>
           jquery-resizable - A simple splitter panel
        </h1>
        <hr />

        <p>
            Simple example that demonstrates how to create slidable two-pane layouts <a href="http://caniuse.com/#search=flexbox">using FlexBox</a> and the resizable plug-in.
            Note that Flexbox is not required, but used here to keep the layout simple.
        </p>

        <label>Horizontal Splitter Panes:</label>

        <div class="panel-container">

            <div class="panel-left">
                left panel
            </div>

            <div class="splitter">
            </div>

            <div class="panel-right">
                right panel
            </div>
        </div>

        <label>Vertical Splitter Panes:</label>
        <div class="panel-container-vertical">

            <div class="panel-top">
                top panel
            </div>

            <div class="splitter-horizontal">
            </div>

            <div class="panel-bottom">
                bottom panel
            </div>
        </div>



        <hr />

        <p>
            This example creates two resizables for the horizontal and vertical splitter panes:
        </p>
<pre>
&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../src/jquery-resizable.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
    $(&quot;.panel-left&quot;).resizable({
        handleSelector: &quot;.splitter&quot;,
        resizeHeight: false
    });
    $(&quot;.panel-top&quot;).resizable({
        handleSelector: &quot;.splitter-horizontal&quot;,
        resizeWidth: false
    });
&lt;/script&gt;
</pre>
    </div>


</body>
</html>

Answer 2

我能看到的唯一方法是使用 JavaScript 之类的东西并实时分析一个的宽度以使另一个增加到 100%。

使两个文本区域并排共享一个灵活的边框

Make two textareas side by side sharing a flexible border

javascript

css

flexbox

jquery-ui-resizable