Одинаковая высота элементов в разных списках в 2 столбцах CSS - PullRequest
Новая
       7

Одинаковая высота элементов в разных списках в 2 столбцах CSS

0 голосов
/ 04 февраля 2020

пожалуйста, помогите мне. Я ищу примеры для чего-то такого же, как мой случай здесь и в других местах, но не нахожу, как мне нужно. У меня есть 2 столбца с различными списками динамических c. В одном столбце 5 списков элементов (заголовок) и 5 ​​списков других элементов (описание для каждого элемента). Они могут быть более или менее 5 предметов. Но элементы списка количества в столбцах всегда одинаковы. Мне нужно, чтобы высота каждого элемента в столбце соответствовала высоте в другом столбце. Можете ли вы показать мне, как я могу это сделать, или показать ссылки с руководством, чтобы решить мою проблему? Спасибо за помощь! 

.columnlist {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  grid-template-areas: "sortable1 sortable2";
  padding: 20px;
}

.columnlist ul {}

#sortable1 {
  grid-area: sortable1;
}

#sortable1 li {
  padding: 10px;
  margin: 5px 0;
  border: solid 1px black;
}

#sortable2 {
  grid-area: sortable2;
}

#sortable2 li {
  background: rgb(255, 250, 205);
  padding: 10px;
  margin: 5px 0;
  border: solid 1px black;
}

ul {
  list-style: none;
}

ol,
ul {
  margin: 0;
}
<div class="columnlist">
  <ul id="sortable1">
    <li>title 1</li>
    <li>title 2</li>
    <li>title 3</li>
    <li>title 4</li>
    <li>title 5</li>
  </ul>
  <ul id="sortable2">
    <li>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet vestibulum risus, vitae condimentum mi. Vivamus eu finibus dui. Fusce mollis lorem vel dui imperdiet, nec viverra lectus tempus. Morbi laoreet urna non urna sodales, non
      feugiat diam rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. </li>
    <li>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet vestibulum risus, vitae condimentum mi. Vivamus eu finibus dui. Fusce mollis lorem vel dui imperdiet, nec viverra lectus tempus. Morbi laoreet urna non urna sodales, non
      feugiat diam rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. </li>
    <li>3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
    <li>4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet vestibulum risus, vitae condimentum mi. Vivamus eu finibus dui. Fusce mollis lorem vel dui imperdiet, nec viverra lectus tempus. Morbi laoreet urna non urna sodales, non
      feugiat diam rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. </li>
    <li>5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet vestibulum risus, vitae condimentum mi. Vivamus eu finibus dui. Fusce mollis lorem vel dui imperdiet, nec viverra lectus tempus. Morbi laoreet urna non urna sodales, non
      feugiat diam rutrum.</li>
  </ul>
</div>

Код на codepen

1 Ответ

2 голосов
/ 04 февраля 2020 

.columnlist {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  grid-template-areas: "sortable1 sortable2";
  padding: 20px;
}

.columnlist ul {}

#sortable1 {
  grid-area: sortable1;
  display: grid;
}

#sortable1 li {
  padding: 10px;
  margin: 5px 0;
  border: solid 1px black;
}

#sortable2 {
  grid-area: sortable2;
  display: grid;
  grid-auto-rows: 1fr;
}

#sortable2 li {
  background: rgb(255, 250, 205);
  padding: 10px;
  margin: 5px 0;
  border: solid 1px black;
}

ul {
  list-style: none;
}

ol,
ul {
  margin: 0;
}
<div class="columnlist">
  <ul id="sortable1">
    <li>title 1</li>
    <li>title 2</li>
    <li>title 3</li>
    <li>title 4</li>
    <li>title 5</li>
  </ul>
  <ul id="sortable2">
    <li>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet vestibulum risus, vitae condimentum mi. Vivamus eu finibus dui. Fusce mollis lorem vel dui imperdiet, nec viverra lectus tempus. Morbi laoreet urna non urna sodales, non
      feugiat diam rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. </li>
    <li>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet vestibulum risus, vitae condimentum mi. Vivamus eu finibus dui. Fusce mollis lorem vel dui imperdiet, nec viverra lectus tempus. Morbi laoreet urna non urna sodales, non
      feugiat diam rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. </li>
    <li>3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
    <li>4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet vestibulum risus, vitae condimentum mi. Vivamus eu finibus dui. Fusce mollis lorem vel dui imperdiet, nec viverra lectus tempus. Morbi laoreet urna non urna sodales, non
      feugiat diam rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. </li>
    <li>5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet vestibulum risus, vitae condimentum mi. Vivamus eu finibus dui. Fusce mollis lorem vel dui imperdiet, nec viverra lectus tempus. Morbi laoreet urna non urna sodales, non
      feugiat diam rutrum.</li>
  </ul>
</div>
...