Как сгладить вложенные элементы div для отображения их в сетке CSS? - PullRequest
Новая
       4

Как сгладить вложенные элементы div для отображения их в сетке CSS?

0 голосов
/ 05 февраля 2019

Я генерирую таблицу (с vue.js) из объекта, который должен иметь ширину в два столбца.Каждый из столбцов происходит от ключа и значения объекта.Это эквивалентно следующему фактическому HTML: 

<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>

Я использую сетку CSS для форматирования этих div в сетку 2x2, которая, как я ожидал, будет 

this is something long on the first row | short 1st row
wazaa 2nd row                           | wazii 2nd row

Код длясделать это: 

#table {
  display: grid;
  grid-template-columns: auto 1fr;
}
<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>

Результат не тот, который я ожидаю: два самых глубоких div ведут себя так, как они должны быть вне дисплея grid: они располагаются поверхдруг друга.

Я хотел, чтобы они унаследовали поведение сетки: выравнивать на основе шаблонов столбцов по мере их поступления.Как этого добиться?

Ответы [ 3 ]

0 голосов
/ 05 февраля 2019

Если возможно, я бы посоветовал изменить ваш код Vue.js, чтобы он не генерировал ненужный вложенный уровень div, и сделать так: 

#table {
  display: grid;
  grid-template-columns: auto 1fr;
}
#table > div { border: 1px dotted black; }
<div id="table">
  <div>
    this is something long on the first row
  </div>
  <div>
    short 1st row
  </div>
  <div>
    wazaa 2nd row
  </div>
  <div>
    wazii 2nd row
  </div>
</div>

Если это невозможно, вы можете использовать Javascript для достижения того же, но на стороне клиента.Вы также можете использовать display:contents из ответа @Temani, но он имеет довольно ограниченную поддержку браузера с возможными ошибочными результатами.

Если вы предпочитаете вместо этого решение Javascript, выможно использовать это: 

(function() {
  var table = document.getElementById("table");
  var divs = [...table.childNodes]; // use ... to enumerate the items immediately
  for (var i = 0; i < divs.length; i++) {
    var div = divs[i];
    while (div.childNodes.length > 0)
      table.appendChild(div.childNodes[0]);
    div.remove();
  }
})()
#table {
  display: grid;
  grid-template-columns: auto 1fr;
}
#table > div { border: 1px dotted black }
<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>
0 голосов
/ 05 февраля 2019

Свойства сетки не применяются к вашим элементам содержимого, так как эти элементы находятся вне области действия.

Форматирование сетки ограничено отношениями родитель-потомок.Это означает, что контейнер сетки всегда является родительским, а элемент сетки всегда дочерним.Потомки контейнера сетки за пределами дочерних элементов не являются частью макета сетки и не будут принимать свойства сетки.

Поскольку ваши элементы содержимого находятся на два уровня ниже контейнера сетки (#table), что делает их внуками, а не детьми.они не являются элементами сетки и не будут принимать свойства сетки.

Подробнее: Свойства сетки не работают с элементами внутри контейнера сетки

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

display: contents рассмотрен в другом ответе на этот пост .Это позволяет родительскому элементу игнорировать элемент как содержащий блок, поэтому родитель распознает своих внуков как нормальных детей.Но на данный момент этот метод практически бесполезен для производственных целей, так как он имеет слабую поддержку браузера .

Более подходящее решение в этом случае будет display: subgrid, что позволяет потомкамконтейнер сетки за пределами дочерних элементов (т. е. дочерних элементов элементов сетки) для соблюдения линий контейнера.Но эта функция не поддерживает браузер.

Подробнее: Позиционирование содержимого элементов сетки в основном контейнере (функция подсетки)

Если вы хотите чистый CSSРешение, может быть, сочетание сетки и flex может помочь.

Вот общая концепция.Без изменений в HTML. 

#table {
  display: grid;
  grid-template-columns: 1fr;
}

#table > div {
  display: flex;
}

#table > div > div {
  flex: 1;
}
<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>
0 голосов
/ 05 февраля 2019

Вы можете использовать display:contents (https://caniuse.com/#feat=css-display-contents), чтобы преодолеть это: 

#table {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap:10px;
}

#table > div {
  display:contents;
}
<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>

Или используйте таблицу отображения, как показано ниже: 

#table {
  display: table;
}

#table > div {
  display:table-row;
}
#table > div > div {
  display:table-cell;
  padding:5px;
}
#table > div > div:first-child {
  white-space:nowrap;
  width:10%;
}
<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>
...