Распределите деления по одной строке на основе их доли в процентах

Question

Я хочу составить однострочный график предметов, который описывает их распределение по времени. Давайте использовать сезоны в качестве примера.

HTML генерируется из внутренних данных. Это может быть изменено в соответствии с требованиями макета, но я надеялся, что ширина в процентах будет правильным решением. CSS - это моя попытка, использующая flexbox, надеясь, что это приведет к буквальному выравниванию элементов.

html, body
{
    margin: 0px;
    padding: 0px;
}
div.container {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
div.season {
    display: inline-block;
    flex: none;
}

    <div class="container">
        <div class="season" width="47.150002%" style="background-color:rgb(156, 203, 205);">
          winter
        </div>
        <div class="season" width="19.520000%" style="background-color:rgb(160, 201, 166);">
          summer_heat
        </div>
        <div class="season" width="26.639997%" style="background-color:rgb(192, 204, 157);">
          fall
        </div>
        <div class="season" width="6.690001%" style="background-color:rgb(156, 203, 205);">
          winter
        </div>
    </div>

В результате элементы имеют такой же большой размер, как и их содержимое. Ожидаемый результат больше похож на этот (я могу жить без черных разделителей):

Почему гибкий макет не заставляет элементы расти на их процентная доля?

Answer 1

Как уже говорили другие, причина, по которой ваши ширины не работают, заключается в том, что атрибут width недопустим на <div> s. Вам нужно переместить его в атрибут style.

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

Там В CSS3 существует замечательный инструмент под названием calc - среди прочего его можно использовать для применения коррекции пикселей в процентах. Используя это, мы можем откорректировать ширину от 100% до общей кумулятивной ширины наших делителей (в нашем случае 12px, для 4px на делитель), а затем умножить на ширину столбцов, представленных в виде десятичной дроби.

Затем мы можем использовать CSS flex justify-content: space-between; и цвет фона для представления разделителей.

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: space-between;
  background-color: #000;
}

<div class="container">
  <div class="season" style="width: calc((100% - 12px) * 0.47150002); background-color: rgb(156, 203, 205);">
    winter
  </div>
  <div class="season" style="width: calc((100% - 12px) * 0.19520000); background-color: rgb(160, 201, 166);">
    summer_heat
  </div>
  <div class="season" style="width: calc((100% - 12px) * 0.26639997); background-color: rgb(192, 204, 157);">
    fall
  </div>
  <div class="season" style="width: calc((100% - 12px) * 0.06690001); background-color: rgb(156, 203, 205);">
    winter
  </div>
</div>

Answer 2

Атрибут ширины поддерживает только следующие элементы:

<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

Для div используйте атрибут style, подобный этому:

  <div class="container">
    <div class="season" style="width:47.150002%; background-color:rgb(156, 203, 205);">
      winter
    </div>
    <div class="season" style="width:19.520000%; background-color:rgb(160, 201, 166);">
      summer_heat
    </div>
    <div class="season" style="width:26.639997%; background-color:rgb(192, 204, 157);">
      fall
    </div>
    <div class="season" style="width:6.690001%; background-color:rgb(156, 203, 205);">
      winter
    </div>
</div>