我有一個包含笑話列表的部分，其中每個笑話都單獨包含在 div 中。在每個笑話中有兩個段落，我試圖將它們對齊以顯示在左側（彈性容器的開頭）?，F在我面臨的兩個主要問題是第一段（Q:）沒有與容器的開頭對齊我正在嘗試對齊段落，以便縮寫和問題都換行到容器內容的最左邊邊界。我面臨的第二個問題是第二段 (A:) 始終在容器中居中，而不是顯示在左側。我不確定為什么第一段不居中，但第二段在顯示網頁時居中。有人告訴我，這可以通過我一直試圖在div p規則集中找到的單個彈性規則來實現?？偟膩碚f，我正在努力實現這種預期的顯示：超文本標記語言 <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>
2 回答
狐的傳說
TA貢獻1804條經驗 獲得超3個贊
用于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>
米脂
TA貢獻1836條經驗 獲得超3個贊
您必須將段落標簽包裝到一個容器中，該容器將具有 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;
}
- 2 回答
- 0 關注
- 232 瀏覽
添加回答
舉報
0/150
提交
取消