2列css中不同列表中元素的高度相同 [英] Same height of elements in different lists in 2 column CSS

问题描述

请帮帮我。我在这里和其他地方搜索与我的案例相同的例子，但没有找到我需要的东西。 我有2列不同的动态列表。 在一栏中，5列列出了元素(标题)，5列出了其他元素(每个元素的描述)。它们可能或多或少是5件以上的物品。但列中的数量列表项总是相同的。 我需要一列中每个元素的高度与另一列中的高度相对应。 你能告诉我怎么做吗，或者显示手册的链接来解决我的问题？ 感谢您的帮助！

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.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>

Code on codepen

推荐答案

.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>

这篇关于2列css中不同列表中元素的高度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！