Как создать два параллельных полноразмерных текстовых поля, используя div - PullRequest
Новая
       21

Как создать два параллельных полноразмерных текстовых поля, используя div

0 голосов
/ 02 мая 2020

Моя цель - создать два полноразмерных текстовых поля, используя div, как показано ниже:

enter image description here

Я могу сделать это легко используя таблицу в качестве механизма разметки, но я изо всех сил пытался заставить ее работать, используя прямой div и css. Я также попытался использовать макеты flexbox и bootstrap. Я подошел близко, но проблемы с вертикальным ростом и урезанным контентом на уровне страницы всегда возникали. Ниже приведена текущая реализация, и мне было интересно, как повторно реализовать с помощью divs: 

<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>

Ответы [ 3 ]

0 голосов
/ 02 мая 2020

Вы можете добиться этого, используя 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;
}

Решает ли это проблему?

0 голосов
/ 02 мая 2020

Попробуйте этот код: 

.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>
0 голосов
/ 02 мая 2020

изменить ширину до 49% для обеих текстовых областей.

...