在所有元素上设置动态等宽

Question

我正在创建一个包含一些信息的模式。有时我的文字很短，有时会更长。我想要好看的模态，平等的模态。我的项目还使用了几种语言的翻译，因此字符串根据当前语言也有不同的长度。

我可以做一些在所有情况下都好看的模态吗？我的第一个想法是为 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>

Answer 1

对于这种情况，我一般使用bootstrap javascript库。基本上 bootstrap 将每一行分成 12 个相等的单位列，您可以选择您的列应包含多少个单位列。由于我们这里每行有3列，所以我们可以为你的每一列选择4个单位列。添加 bootstrap 依赖项后使用：

<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 class 添加到列 div。另外，你会注意到，这会导致一些文本溢出到相邻的列中，我通过添加自动换行来修复它：word-wrap: break-word; 到行 class，你也可以选择只添加水平滚动通过添加以下 css 到您的专栏 class：

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>

Answer 2

你可以使用宽度属性:

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

在这里试试：https://jsfiddle.net/6bL57yd2/

当然你可以根据需要更改数量。

Answer 3

最后我决定使用html <table>标签来解决这个问题。在 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>

谢谢大家的帮助！

在所有元素上设置动态等宽

Set dynamic equal width on all elements

html

css

render