小编Bra*_*rad的帖子

CSS复杂网格布局

我正在寻找布局（下图），我希望HTML遵循相同的格式，因为这将拉动动态内容。

这里有2行，添加更多动态内容后，这些行将重复进行以遵循设计。

我试过使用display：grid; 并显示：flex; 但目前无法正确创建此代码。

我已经在下面创建了它，但是它只适用于一行。我想知道是否有更好的解决方法，还是有人可以提供答案？

Codepen：-https://codepen.io/scottYg55/pen/VwwPqXB ?& editable = true

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.wrapper>div {
  background: blue;
  border: 1px solid black;
}

.wrapper>div:nth-of-type(1) {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;
}

.wrapper>div:nth-of-type(4) {
  grid-column-start: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  background: red;
}

Run Code Online (Sandbox Code Playgroud)

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
</div>

Run Code Online (Sandbox Code Playgroud)

html css jquery css-grid

Bra*_*rad

2019 10-22

2
推荐指数

1
解决办法

66
查看次数

如果所有div具有相同的样式，则删除元素

我有多个同名的div，我想检查所有div是否具有显示样式：none; 那么另一个div也将隐藏。Codepen： - https://codepen.io/scottYg55/pen/OexpgR `

jQuery(".tile").each(function () {
  if (jQuery(this).css("display") == "none") { 
    $(".hideme").hide(); 
  }
});

Run Code Online (Sandbox Code Playgroud)

.tiles {
  width:100%;
  height:100%;
}

.tile {
  width:100%;
  height:200px;
  background:red;
}

Run Code Online (Sandbox Code Playgroud)

<div class="tiles">
  <div class="tile" style="display: none">Test</div>
  <div class="tile" style="display: none">Test</div>
  <div class="tile" style="display: none">Test</div>
  <div class="tile" style="display: none">Test</div>
  <div class="tile" style="display: none">Test</div>
  <div class="tile" style="display: none">Test</div>
</div>

Run Code Online (Sandbox Code Playgroud)

jQuery仅在1 div具有这种样式时才起作用，我希望当所有div具有这种样式时隐藏此hideme div

html css jquery

Bra*_*rad

2019 06-26

0
推荐指数

1
解决办法

37
查看次数