网格项目内的div？

Question

我正在使用网格布局，并且试图将图像放置在同一个网格项内的文本旁边。图像就像一个图标，应该就在文本旁边（因为它被放置在下面的代码中）。它旁边的文本也应该与文本的其余部分具有不同的颜色和字体。我以前用跨度试过这个。但是，当我在 griditem 中使用任何这些标签时，它有点破坏了网格。它不再是普通的文字墙，而是突然彼此相邻。我已经尝试了几个小时了，有人可以帮忙吗？

.container {
  display: grid;
  grid-template: repeat(4, auto) 300px 150px / repeat(6, 1fr);
  grid-gap: 3px;
  grid-template-areas: ". . h h . ." ". . img img . ." "a a a a a a" ". t t t t ." ". p1 p2 p3 p4 ." ". sm sm hp hp .";
}

.text {
  display: flex;
  grid-area: t;
  font-size: 1vw;
  font-family: Verdana;
  border: 1px solid #3f3f3f;
  border-radius: 25px;
  padding: 2%;
}

<div class="container">
  <div class="text">Hi!<br><br> Just a quick note to say thank you for making an account with SuperBath.co.uk!
    <br><br> Having a SuperBath.co.uk account will give you the following perks:<br>
    <br>
    <img src="..scratches/Drop.jpg">Saved personal details<br> Personal data is instantly available as you log in with your email address and password. <br><br>
  </div>
</div>

Answer 1

这里的主要问题是因为你在text 上使用display: flex，img 变成了一个 flex row 项目，而图像前后的文本将成为匿名的 flex 项目，因此它们并排排列。

主要有两种方法可以解决这个问题，一种解决方案是将整个文本/图像块包装在span 中，然后在img 旁边的文本上启用不同的颜色，也可以换行它带有span。

堆栈sn-p

.container {
  display: grid;
  grid-template: repeat(4, auto) 300px 150px / repeat(6, 1fr);
  grid-gap: 3px;
  grid-template-areas: ". . h h . ." ". . img img . ." "a a a a a a" ". t t t t ." ". p1 p2 p3 p4 ." ". sm sm hp hp .";
}

.text {
  display: flex;
  grid-area: t;
  font-size: 1vw;
  font-family: Verdana;
  border: 1px solid #3f3f3f;
  border-radius: 25px;
  padding: 2%;
}

.text span span {
  color: blue                   /*  added  */
}

<div class="container">
  <div class="text"><span>Hi!
    <br>
    <br> Just a quick note to say thank you for making an account with SuperBath.co.uk!
    <br>
    <br> Having a SuperBath.co.uk account will give you the following perks:
    <br>
    <br>
    <img src="http://placehold.it/15/00f"><span>Saved personal details</span>
    <br> Personal data is instantly available as you log in with your email address and password.
    <br>
    <br></span>
  </div>
</div>

---

或者按照评论中的建议，只需从text 中删除display: flex，然后只用span 包裹应该具有不同颜色的文本。

堆栈sn-p

.container {
  display: grid;
  grid-template: repeat(4, auto) 300px 150px / repeat(6, 1fr);
  grid-gap: 3px;
  grid-template-areas: ". . h h . ." ". . img img . ." "a a a a a a" ". t t t t ." ". p1 p2 p3 p4 ." ". sm sm hp hp .";
}

.text {
  grid-area: t;
  font-size: 1vw;
  font-family: Verdana;
  border: 1px solid #3f3f3f;
  border-radius: 25px;
  padding: 2%;
}

.text span {
  color: blue                   /*  added  */
}

<div class="container">
  <div class="text">Hi!
    <br>
    <br> Just a quick note to say thank you for making an account with SuperBath.co.uk!
    <br>
    <br> Having a SuperBath.co.uk account will give you the following perks:
    <br>
    <br>
    <img src="http://placehold.it/15/00f"><span>Saved personal details</span>
    <br> Personal data is instantly available as you log in with your email address and password.
    <br>
    <br>
  </div>
</div>