Каждый элемент имеет ту же ширину, что и самый широкий элемент

Я хочу создать этот макет:

enter image description here

Когда элемент не помещается в контейнер, мы можем перейти к следующей строке:

enter image description here

Когда контейнер является маленьким, чем более широкий элемент, мы можем обернуть содержимое в многостроках

enter image description here

Это очень просто с 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>

Ответы

Ответ 1

Можно использовать простой 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>

Ответ 2

Пока только CSS не может сопоставлять ширину всех элементов сиблинга с самой широкой. Тем не менее, вы можете достичь большей части вашего желаемого макета с помощью CSS, указав свои элементы списка на 50%, чтобы создать две структуры столбцов (width: calc(50% - 10px /* subtracts margins */);), а затем также дать им минимальную ширину (min-width:153px; в этом примере).

Если вы не можете вручную установить минимальную ширину в CSS, вам, скорее всего, придется дополнить свой CSS некоторым javascript, чтобы установить минимальную ширину для этих элементов сиблинга, похожих на ваш пример.

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>

Ответ 3

У меня есть уродливое решение

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>