Question

我只是想在某些网格列中显示某些div，但它不起作用。网格中有空白。这是HTML：

*{
margin: 0;
padding: 0;
box-sizing: border-box;}
    body{
margin: 50px auto;
width: 80%;
max-width: 1000px; }
    .container{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;}
    .div{
border: dotted 2px #f4f4f4;
height: 100px;
width: 100%;}
    .yo{
background: yellow;
grid-column: 3/4;}
    .be {
background: rgb(15, 56, 192);
grid-column: 4/5;}
    .red{
background: rgb(212, 16, 16);
grid-column: 1/2;}
    .blue{
background: rgb(0, 238, 255);
grid-column: 2/3;}

这是CSS：

    <table id="exploreTable">
        <tr>
            <li>
                <a></a>
            </li>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>International relations -- Handbook
                        <a></a>
                    </li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>Titles by: Jose, Charles, editor.
                        <a></a>
                    </li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>Series: Policy brief ; no. 2016-03
                        <a></a>
                    </li>
                </ul>
            </td>
        </tr>
    </table>

    <script>
      const arr = document.getElementById("exploreTable").querySelectorAll('li');
      const result = [].filter.call(arr,(el)=>{
        return !(el.textContent.indexOf("Series:") === 0||el.textContent.indexOf("Titles by:") === 0)
      });
      const resText = result.map((el, index)=>{
         return `${index+1} ${el.textContent}`;
      });
      console.log(result);
      console.log(resText);

    </script>

现在，我想在第1列中看到所有类名称为红色的div，在第2列中看到蓝色的名称，在第3列中显示黄色，在第4列中显示天蓝色。

在容器div中将具有该类的div的方式和位置保持不变。我希望能够像我想要的那样组织div。

另外，我希望前5个div独立。也就是说，我希望他们保持原样。但是在那5个div之后，我希望其余的div能够按照我说的那样按列进行组织。

我了解html，css和学习Javascript Dom。接受所有类型的解决方案。您可以使用任何与网页设计有关的语言给我一个解决方案。

Answer 1

正如@elveti已经提到的，grid-auto-flow: dense;是您的朋友。

应用您忽略前五个项目的请求，结果如下：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 50px auto;
  width: 80%;
  max-width: 1000px;
}

.container {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(4, 1fr);
}


.div {
  border: dotted 2px #f4f4f4;
  grid-column: auto;
  height: 100px;
  width: 100%;
}


.yellow {
  background: yellow;
}

.green {
  background: green;
}

.red {
  background: red;
}

.blue {
  background: blue;
}


.yellow:nth-child(1n+6) {
  grid-column: 3/3;
}

.green:nth-child(1n+6) {
  grid-column: 4/4;
}

.red:nth-child(1n+6) {
  grid-column: 1/1;
}

.blue:nth-child(1n+6) {
  grid-column: 2/2;
}

<div class="container">
  <div class="div blue">hi hello blue</div>
  <div class="div blue">hi hello</div>
  <div class="div yellow">hi hello</div>
  <div class="div yellow">hi hello</div>
  <div class="div yellow">hi hello</div>
  <div class="div green">hi hello</div>
  <div class="div green">hi hello</div>
  <div class="div red">hi hello</div>
  <div class="div green">hi hello</div>
  <div class="div red">hi hello</div>
  <div class="div green">hi hello</div>
  <div class="div red">hi hello</div>
  <div class="div blue">hi hello</div>
  <div class="div yellow">hi hello</div>
  <div class="div yellow">hi hello</div>
  <div class="div yellow">hi hello</div>
  <div class="div green">hi hello</div>
  <div class="div red">hi hello</div>
</div>

请注意，由于您的颜色有些混乱（蓝色是天蓝色），因此我将颜色更改为更具体。

我想在特定的行中显示具有特定类别的框

1 个答案: