Блог

Главная - Вопросы по программированию - Установить динамическую равную ширину для всех элементов

Установить динамическую равную ширину для всех элементов

#html #css #render

#HTML #css #визуализация

Вопрос:

Я создаю модальный файл с некоторой информацией. Иногда у меня короткий текст, иногда длиннее. Я хочу иметь хорошо выглядящий модальный, равный модальный. Мой проект также использует перевод на несколько языков, поэтому строки также имеют разную длину в соответствии с текущим языком.

Могу ли я что-то сделать для хорошего внешнего вида modal во всех случаях? Моя первая идея — установить большую ширину для name and email class (прокомментированного кода), затем работает нормально, все столбцы равны, а модальный вид выглядит хорошо. Но теперь я думаю о лучшем, более универсальном решении. Я пытался использовать flex basis/shrink/grow в некоторой конфигурации, но ничего не дало хорошего эффекта.

 body {
  background-color: lightcoral;
}

.container {
  width: 1200px;
  margin: 0 auto;
  background-color: white;
}

.row {
  display: flex;
  justify-content: center;
  padding-top: 30px;
}

.name {
  border: 1px solid red;
  padding: 5px 30px 5px 5px;
/*   width: 200px; */
}

.email {
  border: 1px solid black;
  padding: 5px 30px 5px 5px;
/*   width: 250px; */
}

.text {
  border: 1px dotted black;
  max-width: 550px;
  padding: 5px;
} 
 <div class="container">
  <div class="row">
    <div class="name">
      <p>LoremIpsum</p>
    </div>
    <div class="email">
      <p>loremipsumloremipsum@loremipsum.io</p>
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio molestias obcaecati sed ipsa ea et numquam minima voluptatibus, aliquam quia at deleniti velit praesentium incidunt! Harum mollitia deleniti laudantium?Soluta voluptate ab, aliquam veniam quos placeat repudiandae enim illum rem ipsum veritatis facilis maiores dolore eveniet magni totam hic tempore reiciendis dignissimos ratione animi ea nostrum! Ducimus, perspiciatis sed!
    </div>
  </div>
    <div class="row">
    <div class="name">
      <p>LoremIpsum</p>
    </div>
    <div class="email">
      <p>loremipsum@loremipsum.io</p>
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio molestias obcaecati sed ipsa ea et numquam minima voluptatibus, aliquam quia at deleniti velit praesentium incidunt! Harum mollitia deleniti laudantium?Soluta voluptate ab, aliquam veniam quos placeat repudiandae enim illum rem ipsum veritatis facilis maiores dolore eveniet magni totam hic tempore reiciendis dignissimos ratione animi ea nostrum! Ducimus, perspiciatis sed!
    </div>
  </div>
    <div class="row">
    <div class="name">
      <p>Lorem Ipsum Lorem</p>
    </div>
    <div class="email">
      <p>loremipsumloremipsum@loremipsum.io</p>
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio molestias obcaecati sed ipsa ea et numquam minima voluptatibus, aliquam quia at deleniti velit praesentium incidunt! Harum mollitia deleniti laudantium?Soluta voluptate ab, aliquam veniam quos placeat repudiandae enim illum rem ipsum veritatis facilis maiores dolore eveniet magni totam hic tempore reiciendis dignissimos ratione animi ea nostrum! Ducimus, perspiciatis sed!
    </div>
  </div>
    <div class="row">
    <div class="name">
      <p>Lorem Ipsum</p>
    </div>
    <div class="email">
      <p>loremipsum@loremipsum.io</p>
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio molestias obcaecati sed ipsa ea et numquam minima voluptatibus, aliquam quia at deleniti velit praesentium incidunt! Harum mollitia deleniti laudantium?Soluta voluptate ab, aliquam veniam quos placeat repudiandae enim illum rem ipsum veritatis facilis maiores dolore eveniet magni totam hic tempore reiciendis dignissimos ratione animi ea nostrum! Ducimus, perspiciatis sed!
    </div>
  </div>
    <div class="row">
    <div class="name">
      <p>LoremIpsumLoremIpsumLorem</p>
    </div>
    <div class="email">
      <p>loremipsum@loremipsum.io</p>
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio molestias obcaecati sed ipsa ea et numquam minima voluptatibus, aliquam quia at deleniti velit praesentium incidunt! Harum mollitia deleniti laudantium?Soluta voluptate ab, aliquam veniam quos placeat repudiandae enim illum rem ipsum veritatis facilis maiores dolore eveniet magni totam hic tempore reiciendis dignissimos ratione animi ea nostrum! Ducimus, perspiciatis sed!
    </div>
  </div>
</div>

Комментарии:

1. Вы можете использовать bootstrap для вашего требования: w3schools.com/bootstrap4

2. Вы хотите, чтобы элементы были выровнены как по строкам, так и по столбцам? Если это так, вы вместо этого заглядывали в CSS Grid?

3. @IvanS95 Я все еще думаю об этом. Может быть, просто таблица html также является хорошим решением?

4. Я бы не рекомендовал использовать таблицы для макета, только если он используется для отображения табличных данных … но для модального, я думаю, лучше придерживаться flexbox или grids

Ответ №1:

Для подобной ситуации я обычно использую библиотеку bootstrap javascript. По сути, bootstrap делит каждую строку на 12 равных единичных столбцов, и вы можете выбрать, сколько единичных столбцов должен содержать ваш столбец. Поскольку у нас здесь по 3 столбца в каждой строке, мы можем выбрать 4 единичных столбца для каждого вашего столбца. После добавления зависимости начальной загрузки с помощью:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Вы можете добавить col-sm-4 класс в свой столбец divs.
Кроме того, вы заметите, что это приведет к переполнению части текста в соседние столбцы, я исправил это, добавив перенос слов: word-wrap: break-word; в класс строк вы также можете просто добавить горизонтальную прокрутку, добавив следующий css в свой класс столбцов:

 overflow-x: scroll

Обновленный код будет выглядеть следующим образом:

 body {
  background-color: lightcoral;
}

.container {
  width: 1200px;
  margin: 0 auto;
  background-color: white;
}

.row {
  display: flex;
  justify-content: center;
   word-wrap: break-word;
  padding-top: 30px;
}

.name {
  border: 1px solid red;
  padding: 5px 30px 5px 5px;
/*   width: 200px; */
}

.email {
  border: 1px solid black;
  padding: 5px 30px 5px 5px;
/*   width: 250px; */
}

.text {
  border: 1px dotted black;
  max-width: 550px;
  padding: 5px;
} 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-4 name">
      <p>LoremIpsum</p>
    </div>
    <div class="col-sm-4 email">
      <p>loremipsumloremipsum@loremipsum.io</p>
    </div>
    <div class="col-sm-4 text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio molestias obcaecati sed ipsa ea et numquam minima voluptatibus, aliquam quia at deleniti velit praesentium incidunt! Harum mollitia deleniti laudantium?Soluta voluptate ab, aliquam veniam quos placeat repudiandae enim illum rem ipsum veritatis facilis maiores dolore eveniet magni totam hic tempore reiciendis dignissimos ratione animi ea nostrum! Ducimus, perspiciatis sed!
    </div>
  </div>
    <div class="row">
    <div class="col-sm-4 name">
      <p>LoremIpsum</p>
    </div>
    <div class="col-sm-4 email">
      <p>loremipsum@loremipsum.io</p>
    </div>
    <div class="col-sm-4 text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio molestias obcaecati sed ipsa ea et numquam minima voluptatibus, aliquam quia at deleniti velit praesentium incidunt! Harum mollitia deleniti laudantium?Soluta voluptate ab, aliquam veniam quos placeat repudiandae enim illum rem ipsum veritatis facilis maiores dolore eveniet magni totam hic tempore reiciendis dignissimos ratione animi ea nostrum! Ducimus, perspiciatis sed!
    </div>
  </div>
    <div class="row">
    <div class="col-sm-4 name">
      <p>Lorem Ipsum Lorem</p>
    </div>
    <div class="col-sm-4 email">
      <p>loremipsumloremipsum@loremipsum.io</p>
    </div>
    <div class="col-sm-4 text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio molestias obcaecati sed ipsa ea et numquam minima voluptatibus, aliquam quia at deleniti velit praesentium incidunt! Harum mollitia deleniti laudantium?Soluta voluptate ab, aliquam veniam quos placeat repudiandae enim illum rem ipsum veritatis facilis maiores dolore eveniet magni totam hic tempore reiciendis dignissimos ratione animi ea nostrum! Ducimus, perspiciatis sed!
    </div>
  </div>
    <div class="row">
    <div class="col-sm-4 name">
      <p>Lorem Ipsum</p>
    </div>
    <div class="col-sm-4 email">
      <p>loremipsum@loremipsum.io</p>
    </div>
    <div class="col-sm-4 text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio molestias obcaecati sed ipsa ea et numquam minima voluptatibus, aliquam quia at deleniti velit praesentium incidunt! Harum mollitia deleniti laudantium?Soluta voluptate ab, aliquam veniam quos placeat repudiandae enim illum rem ipsum veritatis facilis maiores dolore eveniet magni totam hic tempore reiciendis dignissimos ratione animi ea nostrum! Ducimus, perspiciatis sed!
    </div>
  </div>
    <div class="row">
    <div class="col-sm-4 name">
      <p>LoremIpsumLoremIpsumLorem</p>
    </div>
    <div class="col-sm-4 email">
      <p>loremipsum@loremipsum.io</p>
    </div>
    <div class="col-sm-4 text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio molestias obcaecati sed ipsa ea et numquam minima voluptatibus, aliquam quia at deleniti velit praesentium incidunt! Harum mollitia deleniti laudantium?Soluta voluptate ab, aliquam veniam quos placeat repudiandae enim illum rem ipsum veritatis facilis maiores dolore eveniet magni totam hic tempore reiciendis dignissimos ratione animi ea nostrum! Ducimus, perspiciatis sed!
    </div>
  </div>
</div>

Ответ №2:

Вы можете сделать это, используя свойство width:

 .name {
    width: 20%;
}
.email {
    width: 20%;
}
.text{
    width: 60%;
}

попробуйте это здесь: https://jsfiddle.net/6bL57yd2 /

конечно, вы можете изменить количество по своему усмотрению.

Ответ №3:

Наконец, я решил использовать html <table> -тег для решения этой проблемы. Отображение данных функцией map в React, и я думаю, что моя модальная информация представляет собой табличные данные, поэтому я подозреваю <table> , что это приемлемое решение. Теперь каждый td элемент имеет ширину, равную ширине самого широкого элемента table . Решение ниже:

 table {
  border: 1px solid black;
  margin: 0 auto;
  border-collapse: collapse;
}

td {
  vertical-align: top;
  padding: 5px 15px;
}

.name {
  background-color: lightcoral;
}

.email {
  background-color: lightblue;
}

.text {
  background-color: lightgray;
  max-width: 550px;
} 
 <table>
  <tr>
    <td class="name">
      Lorem ipsum Lorem ipsum
    </td>
    <td class="email">
     Loremipsum@dolorsit.io
    </td>
    <td class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero tempora dolore delectus dolores, et esse eum dignissimos ullam voluptas impedit veritatis neque, odio unde corporis iure dolorum consectetur est necessitatibus.
    </td>
  </tr>
   <tr>
    <td class="name">
      Lorem ipsum Lorem
    </td>
    <td class="email">
     Loremipsumdolorsit@dolorsit.io
    </td>
    <td class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero tempora dolore delectus dolores, et esse eum dignissimos ullam voluptas impedit veritatis neque.
    </td>
  </tr>
   <tr>
    <td class="name">
      Lorem ipsum
    </td>
    <td class="email">
     Loremipsum@dolor.io
    </td>
    <td class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    </td>
  </tr>
</table>

Спасибо всем за вашу помощь!

Метки: