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

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

0 голосов
/ 18 апреля 2019

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

Могу ли я сделать что-нибудь для хорошего модального вида во всех случаях? Моя первая идея установить большую ширину для 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>

Ответы [ 3 ]

1 голос
/ 18 апреля 2019

В такой ситуации я обычно использую библиотеку javascript для начальной загрузки.По сути, начальная загрузка разделяет каждую строку на 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 класс к своим столбцам div.Кроме того, вы заметите, что это приведет к переполнению некоторого текста в соседние столбцы, я исправил это, добавив перенос слов: 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>
0 голосов
/ 19 апреля 2019

Наконец, я решил использовать html <table> tag для решения этой проблемы. Отображение данных с помощью функции карты в 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>

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

0 голосов
/ 18 апреля 2019

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

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

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

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

...