尝试使用 flex 规则在 flex 容器中左对齐文本

Question

我有一个部分有一个笑话列表，其中每个笑话都单独包含在 div 中。在每个笑话中都有两段我试图对齐以显示在左侧（flex 容器的开头）。现在我面临的两个主要问题是第一段 (Q:) 没有与容器的开头对齐

我正在尝试对齐段落，以便缩写和问题都环绕到容器内容的最左侧边界。

我面临的第二个问题是第二段 (A:) 一直在容器中居中，而不是在左侧显示。我不确定为什么第一段不居中，但第二段在显示网页时会居中。有人告诉我，这可以通过我一直试图在我的 div p 规则集中找到的单个 flex 规则来实现。

总的来说，我正在努力实现这个预期的显示：

HTML

 <section id="jokes">
        <h2>Out Of This World Joke Inventory!</h2>
        <p>Hover over each joke to see the answer!</p>
        <div id="joke-cards">
          <div id="sun-joke">
            <img src="img/icon1.png" alt="Icon of shooting star">
            <hr>
            <p><span class="abbrv">Q:</span> Why did the sun go to school?</p>
            <p><span class="abbrv">A:</span> <span class="answer">To get brighter!</span></p>
          </div>

          <div id="tick-joke">
            <img src="img/icon2.png" alt="Icon of rocket blasting off">
            <hr>
            <p><span class="abbrv">Q:</span> What do you call a tick on the moon?</p>
            <p><span class="abbrv">A:</span> <span class="answer">A luna-tick</span></p>
          </div>

          <div id="restaurant-joke">
            <img src="img/icon3.png" alt="Icon of flag on the Moon">
            <hr>
            <p><span class="abbrv">Q:</span> Why did the people not like the restaurant on the moon?</p>
            <p><span class="abbrv">A:</span> <span class="answer">Because there was no atmosphere.</span></p>
          </div>
     </div>
</section>

CSS

#joke-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
}

#joke-cards div {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  height: 400px;
  width: 300px;
  background-color: #9B580D;
  opacity: 80%;
  padding: 20px;
}

#joke-cards div img {
  height: 150px;
  width: 150px;
}

hr {
  width: 65%;
}

div p {
  align-content: flex-start;
}

.abbrv {
  font-size: 28px;
  color: #E0DBD7;
}

.answer {
  display: none;
  font-size: 24px;
  color: #191919;
}

#joke-cards div:hover .answer {
  display: inline;
}

Answer 1

您必须将段落标签包装到一个容器中，该容器将具有 place-items 属性，而不是每个段落。此外，您需要将显示值从块更改为继承每个内容段落。

<div class="content">
   <p><span class="abbrv">Q:</span> Why did the sun go to school?</p>
   <p><span class="abbrv">A:</span> <span class="answer">To get brighter!</span></p>
</div>

div.content{
    display: flex;
    flex-direction: column;
    width: 100%;
    place-self: flex-start;
}

div.content p {
    display:inherit;
}

Answer 2

将align-items: flex-start; 用于div，width + margin 用于img，text-align: left; 用于p

img{ width: 50%; outline: 1px solid blue; margin: 0 auto; }
#joke-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
}

#joke-cards div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  height: 400px;
  width: 300px;
  background-color: #9B580D;
  opacity: 80%;
  padding: 20px;
}

#joke-cards div img {
  height: 150px;
  width: 150px;
}

hr {
  width: 65%;
}

div p {
  text-align: left;
}

.abbrv {
  font-size: 28px;
  color: #E0DBD7;
}

.answer {
  display: none;
  font-size: 24px;
  color: #191919;
}

#joke-cards div:hover .answer {
  display: inline;
}

<section id="jokes">
  <h2>Out Of This World Joke Inventory!</h2>
  <p>Hover over each joke to see the answer!</p>
  <div id="joke-cards">
    <div id="sun-joke">
      <img src="img/icon1.png" alt="Icon of shooting star">
      <hr>
      <p><span class="abbrv">Q:</span> Why did the sun go to school?</p>
      <p><span class="abbrv">A:</span> <span class="answer">To get brighter!</span></p>
    </div>

    <div id="tick-joke">
      <img src="img/icon2.png" alt="Icon of rocket blasting off">
      <hr>
      <p><span class="abbrv">Q:</span> What do you call a tick on the moon?</p>
      <p><span class="abbrv">A:</span> <span class="answer">A luna-tick</span></p>
    </div>

    <div id="restaurant-joke">
      <img src="img/icon3.png" alt="Icon of flag on the Moon">
      <hr>
      <p><span class="abbrv">Q:</span> Why did the people not like the restaurant on the moon?</p>
      <p><span class="abbrv">A:</span> <span class="answer">Because there was no atmosphere.</span></p>
    </div>
  </div>
</section>