尝试使用 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;forpimg{ width: 50%; outline: 1px solid blue; margin: 0 auto; }#joke-cards {&nbsp; display: flex;&nbsp; flex-wrap: wrap;&nbsp; align-items: center;&nbsp; justify-content: space-evenly;}#joke-cards div {&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; align-items: flex-start;&nbsp; margin-top: 15px;&nbsp; margin-left: 15px;&nbsp; margin-right: 15px;&nbsp; margin-bottom: 15px;&nbsp; height: 400px;&nbsp; width: 300px;&nbsp; background-color: #9B580D;&nbsp; opacity: 80%;&nbsp; padding: 20px;}#joke-cards div img {&nbsp; height: 150px;&nbsp; width: 150px;}hr {&nbsp; width: 65%;}div p {&nbsp; text-align: left;}.abbrv {&nbsp; font-size: 28px;&nbsp; color: #E0DBD7;}.answer {&nbsp; display: none;&nbsp; font-size: 24px;&nbsp; color: #191919;}#joke-cards div:hover .answer {&nbsp; display: inline;}<section id="jokes">&nbsp; <h2>Out Of This World Joke Inventory!</h2>&nbsp; <p>Hover over each joke to see the answer!</p>&nbsp; <div id="joke-cards">&nbsp; &nbsp; <div id="sun-joke">&nbsp; &nbsp; &nbsp; <img src="img/icon1.png" alt="Icon of shooting star">&nbsp; &nbsp; &nbsp; <hr>&nbsp; &nbsp; &nbsp; <p><span class="abbrv">Q:</span> Why did the sun go to school?</p>&nbsp; &nbsp; &nbsp; <p><span class="abbrv">A:</span> <span class="answer">To get brighter!</span></p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div id="tick-joke">&nbsp; &nbsp; &nbsp; <img src="img/icon2.png" alt="Icon of rocket blasting off">&nbsp; &nbsp; &nbsp; <hr>&nbsp; &nbsp; &nbsp; <p><span class="abbrv">Q:</span> What do you call a tick on the moon?</p>&nbsp; &nbsp; &nbsp; <p><span class="abbrv">A:</span> <span class="answer">A luna-tick</span></p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div id="restaurant-joke">&nbsp; &nbsp; &nbsp; <img src="img/icon3.png" alt="Icon of flag on the Moon">&nbsp; &nbsp; &nbsp; <hr>&nbsp; &nbsp; &nbsp; <p><span class="abbrv">Q:</span> Why did the people not like the restaurant on the moon?</p>&nbsp; &nbsp; &nbsp; <p><span class="abbrv">A:</span> <span class="answer">Because there was no atmosphere.</span></p>&nbsp; &nbsp; </div>&nbsp; </div></section>

Answer 2

您必须将段落标签包装到一个容器中，该容器将具有 place-items 属性，而不是每个段落。此外，您需要将显示值从块更改为继承每个内容段落。<div class="content">&nbsp; &nbsp;<p><span class="abbrv">Q:</span> Why did the sun go to school?</p>&nbsp; &nbsp;<p><span class="abbrv">A:</span> <span class="answer">To get brighter!</span></p></div>div.content{&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; place-self: flex-start;}div.content p {&nbsp; &nbsp; display:inherit;}