Question

正如您在我应用于此问题的代码段中所看到的那样，对齐方式被破坏了，因为不同的div基于其中的文本具有不同的宽度。

我希望每列的最大div宽度由其内部文本的长度确定，并使所有其他div都采用该宽度。我不想对任何宽度进行硬编码，也不能过多地更改HTML结构。

我希望最终结果是这样的：

有什么可以做的吗

.match {
    display: flex;
}
.justify-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.matches-container div {
    margin-right: 20px;
    padding: 10px;
}
.match:nth-child(odd) {
  background-color: #d0d0d0;
}
.match:nth-child(even) {
  background-color: #e4b2b2;
}

<div class='matches-container'>
    <div class='match'>
        <div class='justify-center'>
            <p>George</p>
        </div>
        <div class='justify-center'>
            <p>Level 10</p>
        </div>
        <div class='justify-center'>
            <p>Ranger</p>
        </div>
    </div>
    <div class='match'>
        <div class='justify-center'>
            <p>Mia</p>
        </div>
        <div class='justify-center'>
            <p>Level 10</p>
        </div>
        <div class='justify-center'>
            <p>Ranger</p>
        </div>
    </div>
    <div class='match'>
        <div class='justify-center'>
            <p>Ivan</p>
        </div>
        <div class='justify-center'>
            <p>Level 9999</p>
        </div>
        <div class='justify-center'>
            <p>Wizard</p>
        </div>
    </div>
</div>

Answer 1

主容器（.matches-container）具有三个flex项目（.match）。

可以将这些项目设置为跟踪彼此的宽度，因为它们是兄弟姐妹。他们之间有着直接的联系，因为他们共享同一个父母。

但是，您要定位的div（.justify-center是项目（.match）的后代，因此它们成为表兄弟（em），，这意味着它们之间没有直接关联并不是用于调整大小的自然CSS解决方案。

因此，除非您希望使所有内容项成为兄弟姐妹，或者使用表或JavaScript，否则无法将一行中的内容项设置为另一行中内容项的宽度。

更多信息：

Answer 2

将css更改为以下内容。无论如何，即使您将宽度设置为50％，宽度也不会超过33％，但是指定宽度将解决您的问题。我还删除了justify-content：中心以确保它向左对齐。

.justify-center {
    display: flex;
    align-items: center;
    width: 33%;
    text-align: left;
}

Answer 3

您可以尝试更改CSS：

.matches-container {
    display: flex;
}
.justify-center {
    align-items: center;
    padding: 10px;
}
.match div:nth-child(odd) {
  background-color: #d0d0d0;
}
.match div:nth-child(even) {
  background-color: #e4b2b2;
}
.match{
  justify-content: flex-start;
}

<div class='matches-container'>
    <div class='match'>
        <div class='justify-center'>
            <p>George</p>
        </div>
        <div class='justify-center'>
            <p>Mia</p>
        </div>
        <div class='justify-center'>
            <p>Ivan</p>
        </div>
    </div>  
     <div class='match'>
        <div class='justify-center'>
            <p>Level 10</p>
        </div>
        <div class='justify-center'>
            <p>Level 10</p>
        </div>
        <div class='justify-center'>
            <p>Level 9999</p>
        </div>
    </div>
    <div class='match'>
        <div class='justify-center'>
            <p>Ranger</p>
        </div>
        <div class='justify-center'>
            <p>Ranger</p>
        </div>
        <div class='justify-center'>
            <p>Wizard</p>
        </div>
    </div>
</div>

https://jsfiddle.net/kzec0798/

Answer 4

如果您确实想要一个后代元素来定义列宽并希望具有相同的标记，则必须将display属性切换为表值，以创建flexbox。

如果您要显示的是表格数据，并且确实以这种方式显示，则可以使用<table> 。

.matches-container {
   display: table;
}
.match {
    display: table-row;
}
.match > div {
   display: table-cell;
}
.justify-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.matches-container div {
    margin-right: 20px;
    padding: 10px;
}
.match:nth-child(odd) {
  background-color: #d0d0d0;
}
.match:nth-child(even) {
  background-color: #e4b2b2;
}

<div class='matches-container'>
    <div class='match'>
        <div class='justify-center'>
            <p>George</p>
        </div>
        <div class='justify-center'>
            <p>Level 10</p>
        </div>
        <div class='justify-center'>
            <p>Ranger</p>
        </div>
    </div>
    <div class='match'>
        <div class='justify-center'>
            <p>Mia Mia Mia Mia Mia Mia Mia</p>
        </div>
        <div class='justify-center'>
            <p>Level 10</p>
        </div>
        <div class='justify-center'>
            <p>Ranger</p>
        </div>
    </div>
    <div class='match'>
        <div class='justify-center'>
            <p>Ivan</p>
        </div>
        <div class='justify-center'>
            <p>Level 9999</p>
        </div>
        <div class='justify-center'>
            <p>Wizard</p>
        </div>
    </div>
</div>

Answer 5

在表中显示数据是最简单的解决方案

td {
padding: 1rem
}

<table>
 <tr>
  <td>George</td>
  <td>Level 10</td>
  <td>Ranger</td>
 </tr>

 <tr>
  <td>Mia</td>
  <td>Level 10</td>
  <td>Ranger</td>
 </tr>

 <tr>
  <td>Ivan</td>
  <td>Level 9999</td>
  <td>Wizard</td>
 </tr>
</table>

使最长的内容项设置整个列的宽度

5 个答案: