Question

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

＆＃13;

$('#'+key).html(data) 

funtion data(data) {
  $('#'+key).html(data)
}

funtion data2(data) {
  $('#'+key).html(data)
}

＆＃13;

.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%;
}

＆＃13;

Answer 1

这里的主要问题是，因为您在display: flex上使用了text，img成为了一个flex 行项目以及图片前后的文字，将成为匿名弹性项目，因此他们并排排列。

主要有两种解决方法，一种解决方案是将整个文本/图像块包装在span中，然后在img旁边的文本上启用不同的颜色}，还用span包装它。

Stack snippet

.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>

或者根据评论中的建议，只需从display: flex中删除text，然后仅使用span包含应该具有不同颜色的文字。

Stack snippet

.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>

划分网格项目？

1 个答案: