每个项目都具有与最宽元素相同的宽度答案

【问题标题】：Every item to have the same width as the widest element每个项目都具有与最宽元素相同的宽度
【发布时间】：2015-09-18 12:24:01
【问题描述】：

我想创建这个布局：

当一个项目不适合容器时，我们可以移动到下一行：

当容器比更宽的项目小时，我们可以将内容包裹在多行中

使用 Javascript 非常简单，这里是示例 https://jsfiddle.net/oucxsep4/。

var choices = document.querySelectorAll('li');
var maxWidth = 0;
// read
for (i = 0; i < choices.length; ++i) {
    maxWidth = Math.max(maxWidth, choices[i].offsetWidth)
};

// write
for (i = 0; i < choices.length; ++i) {
    choices[i].style.width = maxWidth + "px";
};

ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
li{
    background: red;
    float: left;
    margin: 5px;
}

<ul>
    <li>first choice</li>
    <li>choice</li>
    <li>This is the wider choice</li>
    <li>other choice</li>
</ul>

是否可以不使用 Javascript，只使用 CSS 来做到这一点？我试过flexbox 没有成功。

【问题讨论】：

Flexbox 没有网格概念。不同 flex 行的项目独立运行，所以我认为你不能用 flexbox 来实现。
这是重复回答您的问题吗？ stackoverflow.com/questions/42656183/…

标签： css flexbox

【解决方案1】：

单独使用 CSS 尚无法将所有同级元素的宽度匹配到最宽的宽度。但是，您可以通过为列表项设置 50% 的宽度来创建两列结构 (width: calc(50% - 10px /* subtracts margins */);) 并为它们设置最小宽度（在此示例中为 min-width:153px;），来实现大部分所需的布局。

如果您无法在 CSS 中手动设置最小宽度，那么您可能需要使用一些 javascript 来补充您的 CSS，以便为类似于您的示例的兄弟元素设置最小宽度。

ul{
    margin: 0;
    padding: 5px;
    list-style: none;
    width:50%;
    background-color: #eee;
}

ul::after {
    clear: both;
    content: "";
    display: block;
}

li {
    background: red none repeat scroll 0 0;
    display: block;
    float: left;
    margin: 5px;
    min-width: 153px;
    width: calc(50% - 10px);
}

<ul>
    <li>first choice</li>
    <li>choice</li>
    <li>This is the wider choice</li>
    <li>other choice</li>
</ul>

【讨论】：

感谢您的回答。类似于欲望布局但不完全一样。列数应该是动态的。

【解决方案2】：

我有一个丑陋的解决方案

https://jsfiddle.net/y5x3znqo/2/

body {
  background: #ccc
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  background: red;
  float: left;
  margin: 5px;
}

.label {
  position: absolute;
}

.hide {
  visibility: hidden;
}

<ul>
  <li>
    <span class="label">first choice</span>
    <span class="hide">This is the wider choice</span>
  </li>
  <li>
    <span class="label">choice</span>
    <span class="hide">This is the wider choice</span>
  </li>
  <li>
    <span>This is the wider choice</span>
  </li>
  <li>
    <span class="label">other choice</span>
    <span class="hide">This is the wider choice</span>
  </li>
</ul>

这个想法是把最广泛的项目放在可见性的每个选择中：隐藏。这需要预先计算最宽的项目，例如在后端。

【讨论】：

如果您以这种方式找到解决方案，请将其标记为答案。这将对其他人有所帮助。

【解决方案3】：

可以使用简单的 css：

.list-container {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
}

.list {
  display: flex;
  flex-direction: column;
}

.list-item {
  text-transform: capitalize;
  background-color: rgb(200, 30, 40);
  font-size: 1.3em;
  text-align: left;
  padding: 10px;
  margin: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

<!DOCTYPE html>

<div class="list-container">
  <div class="list">
    <div class="list-item">fresh figs</div>
    <div class="list-item">pine nuts</div>
    <div class="list-item">honey</div>
    <div class="list-item">balsamic vinegar</div>
  </div>
</div>
<div class="list-container">
  <div class="list">
    <div class="list-item">fresh figs</div>
    <div class="list-item">pine nuts</div>
    <div class="list-item">honey</div>
    <div class="list-item">balsamic vinegar</div>
  </div>
</div>

【讨论】：

确实如此，您只需要像这样多出一列。（看编辑后的版本）每个列表取最大元素的宽度
有什么方法可以根据列数使这种动态变化吗？所提供的解决方案在任何类型的动态环境中都不太有用。我希望我可以将所有内容放在一个列表中并在列表上设置最大高度以使其包含多列，但随后所有内容的大小都需要自动调整，以便它们是统一的。
@Ericky 我认为 Carlos 试图在该屏幕截图中显示的是原始布局在 2 列中显示 4 个项目，但如果其中任何一个项目太大，则所有项目都会调整大小并显示为 1 列。