如何使用div创建两个并排的全尺寸textareas？

Question

我的目标是使用div创建两个并排的全尺寸的textareas，如下图所示。

我可以很容易地使用表格作为布局机制，但我一直在努力尝试使用直接的div和css来实现它。我也尝试过使用flexbox和bootstrap布局。我很接近，但总是出现垂直增长和页面级裁剪内容的问题。下面是当前的实现，我想知道如何使用div重新实现。

<html>
    <body>
        <table style="width:100%;height:100%;">
            <tr>
                <td>label 1</td>
                <td>label 2</td>
            </tr>
            <tr>
                <td style="width:50%;height:100%;">
                    <textarea style="width:100%;height:100%;"></textarea>                   
                </td>
                <td style="width:50%;height:100%;">
                    <textarea style="width:100%;height:100%;"></textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button>button 1</button>
                </td>
            </tr>
        </table>
    </body>
</html>

Answer 1

0
投票

将两个文本区域的宽度改为49%。

Answer 2

你可以使用flexbox实现这一点。

<div class="wrap">
  <div class="form-item">
    <label>Item 1</label>
    <textarea name="" id="" cols="30" rows="10"></textarea>
  </div>
  <div class="form-item">
    <label>Item 2</label>
    <textarea name=""></textarea>
  </div>
</div>

CSS。

.wrap {
  display: flex;
}

.form-item {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.form-item label {
  display: block;
}

这能解决这个问题吗？

Answer 3

试试这段代码。

.wrapper{
  display: flex;
  width: 100%;
}
.item-wrapper{
  width: 48%;
  margin-right: 10px;
}
textarea{
  width: 100%;
}
label{
  display: block;
}

<div class="wrapper">
  <div class="item-wrapper">
    <label>label 1</label>
    <textarea rows="10"></textarea>
  </div>
  <div class="item-wrapper">
    <label>label 2</label>
    <textarea rows="10"></textarea>
  </div>
</div>

<button>button 1</button>

如何使用div创建两个并排的全尺寸textareas？

问题描述投票：0回答：1

1个回答

最新问题

如何使用div创建两个并排的全尺寸textareas？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1