Как сопоставить высоты в двух стеках , чтобы создать псевдотаблицу только с помощью CSS?

ProgramBox

Как сопоставить высоты в двух стеках , чтобы создать псевдотаблицу только с помощью CSS?

Post author:admin
Запись опубликована:17 марта, 2023
Post category:Вопросы по программированию

#css

Вопрос:

У меня есть два «столбца» из сложенных <div> s, которые расположены рядом, и в каждом столбце одинаковое количество <div> s . Каждый div из них эквивалентен строке таблицы. Однако, поскольку это не настоящая таблица, если в одном div из левых стеков / столбцов больше строк содержимого, чем в соответствующем div в правом столбце, «строки» не будут выровнены. Мне интересно, как я мог бы установить высоту div s, чтобы они соответствовали друг другу.

Вот изображение проблемы.Вы можете видеть, где строка разбивается на третью строку.

Это настроено на ферме Mediawiki, и из-за некоторых ограничений, связанных с этим и используемыми расширениями, я не могу получить доступ к html здесь или создать настоящую таблицу здесь, и я надеюсь на решение только для CSS. Я рассмотрел использование calc() переменных и в таблице стилей, а также, display:table но я не могу понять это.

 <!--The Header -->
<section class="pi-item pi-group pi-border-color pi-collapse" data-item-name="itemAttributes">
  <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Attributes</h2>

<!--The first column -->

  <section class="pi-item pi-group pi-border-color" data-item-name="itemAttributeNames">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability1name">
      <div class="pi-data-value pi-font">Darkvision</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability2name">
      <div class="pi-data-value pi-font">Thick Skin</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability3name">
      <div class="pi-data-value pi-font">Invulnerability</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability4name">
      <div class="pi-data-value pi-font">Shapeshift</div>
    </div>
  </section>

<!--The second column-->

  <section class="pi-item pi-group pi-border-color" data-item-name="itemAttributesDesc">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability1">
      <div class="pi-data-value pi-font">The helm allows the wearer to see in dim light.</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability2">
      <div class="pi-data-value pi-font">Grants immunity to poison.</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability3">
      <div class="pi-data-value pi-font">Grants immunity to wounds. This is a pretty big deal. Like, super over powered. Someone should write to the editor. Or call them. Call right now so we can get some clarification on what the heck is going on here. We need answers. #wtf</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability4">
      <div class="pi-data-value pi-font">The helm gives the wearer the ability to take any form.</div>
    </div>
  </section>
</section>

Для текущего CSS у меня просто есть два раздела, для которых установлена ширина 50% и плавающий левый (наряду с другими не относящимися к делу вещами).

1. Потребуется использование jQuery или JS. Потому что установить 2 раздела рядом друг с другом не будет проблемой. Но установить высоту дочернего элемента из раздела в другой будет невозможно без js.

Ответ №1:

Вы могли бы достичь этого с помощью настройки вашего кода, выполняющего какие-то нелепые вычисления js и утверждающего высоты divs.

Вместо этого я бы выступил за другую настройку кода с использованием гибкой настройки css.

Смотрите Полное руководство по Flexbox.

 .prop { display:flex; }
.key { flex-shrink:0; flex-grow:0; flex-basis:25%; }

 <section class="header">
  <h2> Attributes </h2>

  <section class="content">
    <div class="prop">
      <div class="key"> Darkvision </div>
      <div class="val"> The helm allows the wearer to see in dim light. </div>
    </div>
    <div class="prop">
      <div class="key"> Thick Skin </div>
      <div class="val"> Grants immunity to poison. </div>
    </div>
    <div class="prop">
      <div class="key"> Invulnerability </div>
      <div class="val"> Grants immunity to wounds. This is a pretty big deal. Like, super over powered. Someone should write to the editor. Or call them. Call right now so we can get some clarification on what the heck is going on here. We need answers. #wtf </div>
    </div>
    <div class="prop">
      <div class="key"> Shapeshift </div>
      <div class="val"> The helm gives the wearer the ability to take any form. </div>
    </div>
  </section>
</section>

Ответ №2:

Из вашего HTML-кода, без JavaScript , сетка также возможна:

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

 body>section {
  display: grid;
  grid-template-columns: 1fr 3fr;
  width: 800px;
  max-width: 100%;
  margin: auto;
}

body>section>h2 {
  grid-column: 1/ span 2;
}

body>section>section {
  display: grid;
  grid-auto-rows: 1fr;/* here is the handy part */
  border: solid 1px;
}

section>div {
  border: solid 1px;
  padding: 0.15em
}


/* only for the demo and a touch of flex ;)  */

section>section>div {
  display: flex;
  align-items: center;
}

section>section:first-of-type>div {
  justify-content: center;
}

 <!--The Header -->
<section class="pi-item pi-group pi-border-color pi-collapse" data-item-name="itemAttributes">
  <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Attributes</h2>

  <!--The first column -->

  <section class="pi-item pi-group pi-border-color" data-item-name="itemAttributeNames">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability1name">
      <div class="pi-data-value pi-font">Darkvision</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability2name">
      <div class="pi-data-value pi-font">Thick Skin</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability3name">
      <div class="pi-data-value pi-font">Invulnerability</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability4name">
      <div class="pi-data-value pi-font">Shapeshift</div>
    </div>
  </section>

  <!--The second column-->

  <section class="pi-item pi-group pi-border-color" data-item-name="itemAttributesDesc">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability1">
      <div class="pi-data-value pi-font">The helm allows the wearer to see in dim light.</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability2">
      <div class="pi-data-value pi-font">Grants immunity to poison.</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability3">
      <div class="pi-data-value pi-font">Grants immunity to wounds. This is a pretty big deal. Like, super over powered. Someone should write to the editor. Or call them. Call right now so we can get some clarification on what the heck is going on here. We need answers. #wtf</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability4">
      <div class="pi-data-value pi-font">The helm gives the wearer the ability to take any form.</div>
    </div>
  </section>
</section>

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

Показать фрагмент кода

 body>section {
  display: grid;
  grid-template-columns: 1fr 3fr;
  width: 800px;
  grid-auto-flow: row dense;
  max-width: 100%;
  margin: auto;
}

body>section>h2 {
  grid-column: 1/ span 2;
}

body>section>section {
  display: contents
}

section>div {
  border: solid;
}

h2 section>div {
  grid-column: 1;
}

h2 section section>div {
  grid-column: 2;
}

 <!--The Header -->
<section class="pi-item pi-group pi-border-color pi-collapse" data-item-name="itemAttributes">
  <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Attributes</h2>

  <!--The first column -->

  <section class="pi-item pi-group pi-border-color" data-item-name="itemAttributeNames">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability1name">
      <div class="pi-data-value pi-font">Darkvision</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability2name">
      <div class="pi-data-value pi-font">Thick Skin</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability3name">
      <div class="pi-data-value pi-font">Invulnerability</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability4name">
      <div class="pi-data-value pi-font">Shapeshift</div>
    </div>
  </section>

  <!--The second column-->

  <section class="pi-item pi-group pi-border-color" data-item-name="itemAttributesDesc">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability1">
      <div class="pi-data-value pi-font">The helm allows the wearer to see in dim light.</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability2">
      <div class="pi-data-value pi-font">Grants immunity to poison.</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability3">
      <div class="pi-data-value pi-font">Grants immunity to wounds. This is a pretty big deal. Like, super over powered. Someone should write to the editor. Or call them. Call right now so we can get some clarification on what the heck is going on here. We need answers. #wtf</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability4">
      <div class="pi-data-value pi-font">The helm gives the wearer the ability to take any form.</div>
    </div>
  </section>
</section>

Javascript действительно может помочь, но было бы разумно переосмыслить структуру HTML.

Я бы не советовал display:content использовать метод s: см. Поддержку по адресу https://caniuse.com/css-display-contents

Вот совет: если вы можете читать и понимать содержимое без какого-либо стиля, ваш документ в порядке. Если все перемешано, вероятно, так это видят поисковые системы и другие читатели СМИ.

наконец, вот мое мнение в сторону моего ответа (вы можете пропустить его)

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

Вопрос:

Комментарии:

Ответ №1:

Ответ №2:

Вам также может понравиться

Как установить дополнение QtXlsx (в Windows)

Загрузка нескольких файлов DropZone для обработки

Как найти давление ,оценку f1 ,отзыв для этого приведенного ниже кода путаницы?