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库。基本上，引导程序将每一行分为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>

Answer 2

您可以使用width属性来实现：

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

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

当然，您可以根据需要更改金额。

Answer 3

最后，我决定使用html <table>标签解决此问题。 React中通过map函数显示的数据，我认为我的模态信息是表格数据，因此我怀疑<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>

谢谢大家的帮助！

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

3 个答案: