Question

我有三列以表格格式显示的文本。它们是从JSON feed中填充的。如何将三个LI元素的每一行设置为与该行的最高高度相同的高度？

我需要jQuery还是可以只使用CSS？

我希望它表现HTML TABLE的行为，但不更改解释JSON提要的Javascript，以使其遍历3个一组的元素。谢谢！

ul {
  width: 600px;
}

li {
  display: block;
  width: 180px; 
  padding: 10px;
  margin: 0; 
}

/* Makes the first cell in each row float right and the second one go left */

li:nth-child(3n+1) {
  float: right;
  clear: right;
}

li:nth-child(3n+2) {
  float: left;
  clear: left;
}

<ul>
  <li>This is cell #1, which should appear top right</li>
  <li>Cell #2, top left</li>
  <li>Cell #3 is top centre, and will be the tallest of the cells, as it contains the most text. I would like this row to be of equal height.</li>
  <li>Cell #4, populated from the JSON feed is 2nd row right.</li>
  <li>Cell #5, 2nd row left</li>
  <li>Cell #6 should display 2nd row centre.</li>

<!-- Arbitrarily large number of LI cells to follow here, 
  in three columns, as they are populated from a JSON feed, 
  which I have not included as I feel it over-complicates a
  question about HTML, CSS and jQuery layout -->

</ul>

Answer 1

我在回答中使用了CSS Grid。

有关更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

.container {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

.container > li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.top-left {
  grid-column: 1;
  grid-row: 1;
}

.top-center {
  grid-column: 2;
  grid-row: 1;
}

.top-right {
  grid-column: 3;
  grid-row: 1;
}

.bottom-left {
  grid-column: 1;
  grid-row: 2;
}

.bottom-center {
  grid-column: 2;
  grid-row: 2;
}

.bottom-right {
  grid-column: 3;
  grid-row: 2;
}

li:nth-child(6n+1), li:nth-child(6n+2), li:nth-child(6n+6) {
  background: #000;
  color: #fff;
}

li:nth-child(6n+3), li:nth-child(6n+4), li:nth-child(6n+5) {
  background: #fff; 
  color: #000;
}

<ul class="container">
  <li class="top-right">This is cell #1, which should appear top right</li>
  <li class="top-left">Cell #2, top left</li>
  <li class="top-center">Cell #3 is top centre, and will be the tallest of the cells, as it contains the most text. I would like this row to be of equal height.<br>EQUAL HEIGHT<br>EQUAL HEIGHT<br>EQUAL HEIGHT<br>EQUAL HEIGHT<br>EQUAL HEIGHT<br>EQUAL HEIGHT<br>EQUAL HEIGHT<br>EQUAL HEIGHT<br>EQUAL HEIGHT<br>EQUAL HEIGHT<br></li>
  <li class="bottom-right">Cell #4, populated from the JSON feed is bottom right.</li>
  <li class="bottom-left">Cell #5, bottom left</li>
  <li class="bottom-center">Cell #6 should display bottom centre.</li>
</ul>

更新后的答案：

这对于您的JSON应该足够动态，它可以适应新的列和行，甚至包含很长的内容。

我创建了一个演示JSON，因为您不想提供它。

document.addEventListener("DOMContentLoaded", function(event) {
  var sampleJSON = [
  {
    firstcol: 'COL 11',
    secondcol: 'COL 21',
    thirdcol: 'COL 31'
  },
  {
    firstcol: 'COL 12',
    secondcol: 'COL 22',
    thirdcol: 'COL 32'
  },
  {
    firstcol: 'COL 13',
    secondcol: 'COL 23<br>SUPER LONG CONTENT BUT EQUAL HEIGHT<br>SUPER LONG CONTENT BUT EQUAL HEIGHT<br>SUPER LONG CONTENT BUT EQUAL HEIGHT<br>SUPER LONG CONTENT BUT EQUAL HEIGHT<br>SUPER LONG CONTENT BUT EQUAL HEIGHT<br>SUPER LONG CONTENT BUT EQUAL HEIGHT<br>SUPER LONG CONTENT BUT EQUAL HEIGHT<br>SUPER LONG CONTENT BUT EQUAL HEIGHT<br>',
    thirdcol: 'COL 33'
  },
  {
    firstcol: 'COL 14',
    secondcol: 'COL 24',
    thirdcol: 'COL 34'
  }
  ];

  var currentRow = 1;

  for(var row of sampleJSON) {
    var currentColumn = 1;

    for(var col in row) {
      var li = document.createElement('li');

      li.style.gridColumn = currentColumn;
      li.style.gridRow = currentRow;
      li.innerHTML = row[col];

      document.getElementById('mytable').appendChild(li);

      currentColumn++;
    }
    currentRow++;
  }
});

.container {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

.container > li {
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

<ul id="mytable" class="container">
</ul>

Answer 2

这是网格功能的预览，

您可以检查我可以使用的网站，因为跨浏览器还不错。

Can I use flexbox

这是一个修改，只需使用flex即可管理高度。

您可以使用jquery更改其顺序。只是因为我想这将是一种模式。

让我知道你过得怎么样！

:)星期五快乐

      ul {
        width: 600px;
        display:flex;
        flex-wrap: wrap;
      }

      li {
          display: block;
          width: 33%; 
          margin: 0; 
          padding: 10px; 
          font-size: 12px;
              box-sizing: border-box;
        }
    
        /* Causes the text and background colours to pattern to alternate in cells */



      li:nth-child(6n+1), li:nth-child(6n+2), li:nth-child(6n+6) {
          background: #000;
          color: #fff;
        }

      li:nth-child(6n+3), li:nth-child(6n+4), li:nth-child(6n+5) {
          background: #fff; 
          color: #000;
        }

        /* Makes the first cell in each row float right and the second one go left */

    <div id="checkerboard">

      <ul>

        <li>This is cell #1, which should appear top right</li>

        <li>Cell #2, top left</li>

        <li>Cell #3 is top centre, and will be the tallest of the cells, as it contains the most text. I would like this row to be of equal height.</li>

        <li>Cell #4, populated from the JSON feed is bottom right.</li>

        <li>Cell #5, bottom left</li>

        <li>Cell #6 should display bottom centre.</li>
</ul>
    </div>

Answer 3

在CSS中，将li {display: block;}更改为li {display: table-cell;}。这应该可以解决问题。

如何将三个列表项的组设置为与最高的高度相同？

3 个答案: