尝试使用 Flex 规则将 Flex 容器中的文本左对齐

Question

我有一个包含笑话列表的部分，其中每个笑话都单独包含在 div 中。在每个笑话中有两个段落，我试图将它们对齐以显示在左侧（弹性容器的开头）。现在我面临的两个主要问题是第一段（Q:）没有与容器的开头对齐我正在尝试对齐段落，以便缩写和问题都换行到容器内容的最左边边界。我面临的第二个问题是第二段 (A:) 始终在容器中居中，而不是显示在左侧。我不确定为什么第一段不居中，但第二段在显示网页时居中。有人告诉我，这可以通过我一直试图在div p规则集中找到的单个弹性规则来实现。总的来说，我正在努力实现这种预期的显示：超文本标记语言 <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>

Answer 1

用于align-items: flex-start;div，width+ marginforimg和text-align: left;forp

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>

Answer 2

您必须将段落标签包装到一个容器中，该容器将具有 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;

}