如何使用CSS第n个子元素(奇数)和第n个子元素(偶数)来对齐CSS网格中的列？

u0njafvf 于 2023-04-23 发布在其他

关注(0)|答案(3)|浏览(129)

我有一个CSS网格。我想使用nth-childodd和even选择器来使项目被推到网格的每个垂直边缘-它应该看起来像：

.questionsAndAnswers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 24px;
  font-size: 12px;
  font-family: "sans-serif";
  justify-items: end;
  border: 1px solid red;
}

.questionsAndAnswers:nth-child(odd){
  justify-items: start;
}

<div class="questionsAndAnswers">
  <p>
    one
  </p>
  <p>
    two
  </p>
  <p>
    three
  </p>
  <p>
    four
  </p>
</div>

css

来源：https://stackoverflow.com/questions/76074857/how-can-i-use-css-nth-childodd-nth-childeven-to-justify-columns-in-a-css-gri

3条答案

按热度按时间

qgzx9mmu1#

你接近了-在子<p>-元素上使用nth-child伪选择器，并使用justify-self代替justify-items。

.questionsAndAnswers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 24px;
  font-size: 12px;
  font-family: "sans-serif";
  border: 1px solid red;
}

.questionsAndAnswers p:nth-of-type(even){
  justify-self: end;
}

.questionsAndAnswers p:nth-of-type(odd){
  justify-self: start;
}

<div class="questionsAndAnswers">
  <p>
    one
  </p>
  <p>
    two
  </p>
  <p>
    three
  </p>
  <p>
    four
  </p>
</div>

赞(0）回复(0）举报 2023-04-23

30byixjq2#

.questionsAndAnswers
{

display: grid;
 grid-template-columns: 1fr 1fr;
 grid-gap: 24px;
 font-size: 12px;
 font-family: "sans-serif";
 border: 1px solid red;

}
.questionsAndAnswers p：nth-child（1）
{

grid-row: 1;
 grid-column: 1;

}
.questionsAndAnswers p：nth-child（2）
{

grid-row: 1;
 grid-column: 2;

}
.questionsAndAnswers p：nth-child（3）
{

grid-row: 2;
 grid-column: 1;

}
.questionsAndAnswers p：nth-child（4）
{

grid-row: 2;
 grid-column: 2;

}

赞(0）回复(0）举报 2023-04-23

gmxoilav3#

.questionsAndAnswers {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 24px;
     font-size: 12px;
     font-family: "sans-serif";
     border: 1px solid red;
}
 .questionsAndAnswers p:nth-child(1){
     grid-row: 1;
     grid-column: 1;
}
 .questionsAndAnswers p:nth-child(2){
     grid-row: 1;
     grid-column: 2;
}
 .questionsAndAnswers p:nth-child(3){
     grid-row: 2;
     grid-column: 1;
}
 .questionsAndAnswers p:nth-child(4){
     grid-row: 2;
     grid-column: 2;
}

赞(0）回复(0）举报 2023-04-23

我来回答

如何使用CSS第n个子元素(奇数)和第n个子元素(偶数)来对齐CSS网格中的列？

3条答案

相关问题

热门标签

最新问答