使最长的内容项设置整个列的宽度 [英] Make the longest content item set the width for the entire column

问题描述

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

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

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

有什么可以做的吗

  .match {显示:flex;}.justify-center {显示:flex;证明内容:中心；align-items:居中;}.matches-container div {右边距:20px；内边距:10px;}.match:nth-​​child(odd){背景颜色:#d0d0d0;}.match:nth-​​child(even){背景颜色:#e4b2b2;}  

 < div class ='matches-container'>< div class ='match'>< div class ='justify-center'>< p>乔治</p></div>< div class ='justify-center'>< p>第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>第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>级别9999</p></div>< div class ='justify-center'>< p>向导</p></div></div></div>  

解决方案

主容器( .matches-container )具有三个flex项目( .match )./p>

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

但是，您要定位的div( .justify-center )是项目( .match )的后代，使其成为表亲(cousins)，这意味着它们没有直接的关联，也没有用于相对大小确定的自然CSS解决方案.

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

更多信息:

• 弹性物品的等高子级
• 等高的网格项子级

As you can see in the snippet I've applied to this question, the alignment is ruined because the different divs have different width based on the text inside of them.

I want the biggest div's width of each column to be determined by the length of the text inside of it and have all the rest of the divs to take that width. I don't want to hardcode any width and I can't alter the HTML structure too much.

I want the end result to be something like this:

Is there anything that can be done

.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>

解决方案

The primary container (.matches-container) has three flex items (.match).

Those items can be set to track each others' width because they are siblings. There is a direct association between them, as they share the same parent.

However, the divs you want to target (.justify-center) are descendants of the items (.match), making them cousins, meaning they have no direct association and there are no natural CSS solutions for relative sizing.

Hence, unless you want to make all your content items siblings, or use tables or JavaScript, you can't get your content items in one row to set the width of content items in other rows.

More information:

• Equal height children of flex items
• Equal height children of grid items

这篇关于使最长的内容项设置整个列的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！