我是初學者，正在做我的第一個簡單挑戰，但我還是被卡住了：D 我想將文本向下移動到下一行。
特別是，我想讓文字像這樣： 最終結果
<div class="container">
<img src="/image-qr-code.png" alt="" />
<p class="main">Improve your front-end skills by building projects</p>
<p class="second">
Scan QR Code to visit front-end Mentor and take your coding skills to the next level
</p>
</div>uj5u.com熱心網友回復：
當父元素上p有靜態元素時，元素將自動換行。width這也可以通過max-width在要約束的元素上使用靜態來完成。您還可以使用margin相對于其父級來約束文本。就您而言，我使用marginonsecond并main允許文本與您提供的影像相匹配。這是一個簡單的演示：
.container {
box-shadow: 1px 1px 13px 7px rgb(200 198 198);
width: 240px;
max-width: 240px;
padding: 1em;
border-radius: 5px;
margin: auto;
}
.contain {
background-color: blue;
border-radius: 5px;
display: flex;
justify-content: center;
padding: 1em;
}
img {
max-width: 100%;
}
.main {
font-weight: bold;
text-align: center;
margin: 1em 2em;
}
.second {
text-align: center;
margin: 1em 1em;
}<div class="container">
<div class="contain">
<img src="https://dummyimage.com/150/000/fff&text=QR CODE" https://stackoverflow.com/questions/72034538/how-can-i-move-text-to-the-next-line# alt="" />
</div>
<p class="main">Improve your front-end skills by building projects</p>
<p class="second">
Scan QR Code to visit front-end Mentor and take your coding skills to the next level
</p>
</div>uj5u.com熱心網友回復：
你可以做的是把它們分開 div 這會將單詞放在另一行。
如果您的意思是文本不會溢位，那將包括 CSS> 這是一些代碼
html,
body {
margin: 0;
padding: 0;
background-color: rgb(174, 220, 239);
}
.container {
display: grid;
place-items: center;
padding-top: 300px;
}
form {
background-color: white;
width: 270px;
padding: 20px;
padding-top: 90px;
}<div class="container">
<form action="">
<img src="/image-qr-code.png" alt="" />
<p class="main">Improve your front-end skills by building projects</p>
<div class="second">
<p>
Scan QR Code to visit front-end Mentor and take your coding skills to the next level
</p>
</div>
</form>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/466345.html
下一篇：從2input中決定最小的偶數，如果輸入的數不是偶數，則更正它。任何解決方案（Javascript/html）？