將影像放在單個網格中的文本旁邊

我試圖將我的影像放置在每個網格右側的文本旁邊，但是每當我放置影像時，它們就會被推到文本下方。我認為使用 flexbox 可能會更好，但我已經讓網格按我的預期作業，如果有人可以幫助我，我將不勝感激。

.grid-rules {
    display: grid;
    grid-auto-rows: 116px;
    grid-gap: 4px 51px;
     grid-template-areas: "left right"; 
    grid-template-columns: auto auto;
    margin: 27px 14px;
}
.item {
    color: #333333; 
    font-size: 10pt; 
    font-family: ArialRegular;
}
#rule-title {
    color: #01539C;
    font-size: 12pt; 
    font-family: BurbankSmallBold;
}

hr {
    position: relative;
    border-top: 2px solid #FFBC3A;
    width: 647px;
    top: -35px;  border-top: 2px solid #FFBC3A;
    width: 647px;
}

 <div class="grid-rules">
                    <div class="item"><div id="rule-title">Respect other penguins</div>CP does not tolerate any swearing, bullying or 
    mean behavior toward other penguins. Disciplinary 
    action will be taken should any one of these occur while 
    playing.
    </div>
                    <div class="item"><div id="rule-title">No inappropriate talk</div>References to drugs and alcohol related activities, 
    and sexual, racial or otherwise inappropriate talk 
    are not permitted.
    </div>
                    <div class="item"><div id="rule-title">Never reveal personal information</div>The best way to stay safe online is to NEVER share 
    your real name, phone number, address, email or 
    passwords.<img id="rule-image" src="images/personal.png">
    </div>
                    <div class="item"><div id="rule-title">No cheating</div>Use of third party programs to cheat is prohibited. 
    Players who use any third party programs while 
    playing risk being permanently banned.
    </div>
                </div>
                <hr>
                
                <button class="btn">Continue</button>

這是我正在嘗試做的一個示例https://i.imgur.com/DMlyTD4.png

uj5u.com熱心網友回復：

首先，我建議更改您的標記，以便標題和內容在 a 中組合在一起<div>，與影像分開。請參見下面的示例。

然后，您可以使用display: flex;或display: grid;在.item類上對齊內容（名稱和描述）和影像彼此相鄰。

.grid-rules {
  display: grid;
  grid-auto-rows: 116px;
  grid-gap: 4px 51px;
  grid-template-areas: "left right";
  grid-template-columns: auto auto;
  margin: 27px 14px;
}

.item {
  color: #333333;
  font-size: 10pt;
  font-family: ArialRegular;
  /*New stuff*/
  display: flex;
  /*or use grid*/
  /*display: grid;
  grid-template-columns: repeat(2, 2fr);
  */
}

#rule-title {
  color: #01539C;
  font-size: 12pt;
  font-family: BurbankSmallBold;
}

hr {
  position: relative;
  border-top: 2px solid #FFBC3A;
  width: 647px;
  top: -35px;
  border-top: 2px solid #FFBC3A;
  width: 647px;
}

<div class="grid-rules">
  <div class="item">
    <div>
      <div id="rule-title">Respect other penguins</div>CP does not tolerate any swearing, bullying or mean behavior toward other penguins. Disciplinary action will be taken should any one of these occur while playing.
    </div>
  </div>
  <div class="item">
    <div>
      <div id="rule-title">No inappropriate talk</div>References to drugs and alcohol related activities, and sexual, racial or otherwise inappropriate talk are not permitted.
    </div>
  </div>
  <div class="item">
    <div>
      <div id="rule-title">Never reveal personal information</div>The best way to stay safe online is to NEVER share your real name, phone number, address, email or passwords.
    </div>
    <img id="rule-image" src="images/personal.png">
  </div>
  <div class="item">
    <div>
      <div id="rule-title">No cheating</div>Use of third party programs to cheat is prohibited. Players who use any third party programs while playing risk being permanently banned.
    </div>
  </div>
</div>

標籤：html css

上一篇：使用flexbox和絕對位置居中div有什么區別？

下一篇：如何設定導航欄？