html - 尝试使用 flex 规则在 flex 容器中左对齐文本
问题描述
我有一个包含笑话列表的部分,其中每个笑话都单独包含在 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;
}
解决方案
用于align-items: flex-start;
div 、width
+和margin
forimg
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>
推荐阅读
- c++ - 移动简单纹理时的 SDL2 常规抖动 - 即使在没有 vsync 的情况下以高 fps
- android-studio - 为什么我在 Fragment 中的 TabLayout 只能在第一次使用?
- python - 使用 np.split_array 然后将每个拆分保存到数据帧中
- oracle - having error for missing left parenthesis?
- django - 如何在 Django 模板中将传单地图表单居中
- excel - PowerShell Initiated Excel VBA Macro not doing anything
- python - 使用 pandas 为大尺寸 csv 数据文件创建字典
- python - 如何获得具有多个值的相同名称在Python中获得唯一结果
- pandas - 带有替换和搜索的熊猫过滤器
- machine-learning - 是否有任何方法可以找到对响应有重大影响的变量的值?