Изменение ширины элемента в соответствии с количеством элементов в родительском элементе

Я пишу HTML-страницу состоит из строк и столбцов в элементах DIV.

Иногда строка может содержать только 1 столбец, 2 или 3, и я хочу изменить ширину каждого столбца в зависимости от количества столбцов в строке.

Вот мои примеры HTML здесь:

<!-- 1 column -->
<div class="row">
  <!-- Column will be 100% -->
  <div class="col"></div>
</div>

<!-- 2 columns -->
<div class="row">
  <!-- Column will be 25% -->
  <div class="col"></div>

  <!-- Column will be 75% -->
  <div class="col"></div>
</div>

<!-- 3 columns -->
<div class="row">
  <!-- Column will be 25% -->
  <div class="col"></div>

  <!-- Column will be 50% -->
  <div class="col"></div>

  <!-- Column will be 25% -->
  <div class="col"></div>
</div>

Я не уверен, как бы я написал это в CSS, и надеялся, что кто-нибудь может указать мне правильное направление?

Питер

Источник

3 ответа

Решение

Самый простой способ - добавить еще один класс к row div, обозначающий, сколько div содержит:

<!-- 3 columns -->
<div class="row col3">
  <!-- Column will be 25% -->
  <div class="col"></div>

  <!-- Column will be 50% -->
  <div class="col"></div>

  <!-- Column will be 25% -->
  <div class="col"></div>
</div>

и добавьте стили соответственно:

.col3 div {
   width: 33%;
}

Это дало бы все div-элементы в div с классом col3 33% ширина.

Источник

Просто установите классы сетки с различной шириной (100%, 75%, 50%и т. д.) в зависимости от размера, который вы хотите, и добавьте его к div:

HTML

<!-- 2 columns -->
<div class="row">
  <!-- Column will be 25% -->
  <div class="col quarter"></div>

  <!-- Column will be 75% -->
  <div class="col three-quarters"></div>
</div>

<!-- 3 columns -->
<div class="row">
  <!-- Column will be 25% -->
  <div class="col quarter"></div>

  <!-- Column will be 50% -->
  <div class="col half"></div>

  <!-- Column will be 25% -->
  <div class="col quarter"></div>
</div>

CSS

html,body{
    width: 100%;
}

.row{
    width: 100%;
    overflow: hidden;
}

.col{
    background: red;
    height: 20px;
}

.full{
    width: 100%;
    float: left;
}

.three-quarters{
    width: 75%;
    background: blue;
    float: left;
}

.half{
    width: 50%;
    background: black;
    float: left;
}

.quarter{
    width: 25%;
    float: left;
    background: yellow;
}

FIDDLE

Источник

В вашем CSS установите классы для разных размеров, которые вы хотите. Например col-1 будет 25%,col-2 50% и т. Д.

HTML:

<div class="row">
  <!-- Column will be 100% -->
  <div class="col-4">100%</div>
</div>

<!-- 2 columns -->
<div class="row">
  <!-- Column will be 25% -->
  <div class="col-1">25%</div>

  <!-- Column will be 75% -->
  <div class="col-3">75%</div>
</div>

<!-- 3 columns -->
<div class="row">
  <!-- Column will be 25% -->
  <div class="col-1">25%</div>

  <!-- Column will be 50% -->
  <div class="col-2">50%</div>

  <!-- Column will be 25% -->
  <div class="col-1">25%</div>
</div>

CSS:

.col-1, .col-2, .col-3, .col-4 {
    background-color:#ccc;
    float: left;
}
.row {
    clear:left;
}
.col-1 {
    width:25%;
}
.col-2 {
    width: 50%;
}
.col-3 {
    width: 75%;
}
.col-4 {
    width: 100%;
}

Пример JsFiddle

Источник
Другие вопросы по тегам