我希望將影像和文本放入行中。我嘗試了 flex-direction 以查看是否可以翻轉它，并嘗試使用 align-item 垂直控制它，但所發生的只是容器向左側移動。
body {
font-family: 'Courier New', Courier, monospace;
}
img {
width: 100px;
height: 100px;
}
.title {
font-size: 36px;
font-weight: 900;
}
/* do not edit this footer */
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
background: #eee;
}
body{
text-align:center;
}
.container{
display: flex;
justify-content: center;
gap: 52px;}
.in{
max-width: 200px;
}
.title{
margin-bottom: 32px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Information</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="title">Information!</div>
<div class="container">
<div class="in">
<img src="./images/barberry.png" alt="barberry">
<div class="text">This is a type of plant. We love this one.</div>
<div class="in">
<img src="./images/chilli.png" alt="chili">
<div class="text">This is another type of plant. Isn't it nice?</div>
<div class="in">
<img src="./images/pepper.png" alt="pepper">
<div class="text">We have so many plants. Yay plants.</div>
<div class="in">
<img src="./images/saffron.png" alt="saffron">
<div class="text">I'm running out of things to say about plants.</div>
<!-- disregard this section, it's here to give attribution to the creator of these icons -->
<div class="footer">
<div>Icons made by <a href="https://www.flaticon.com/authors/icongeek26" title="Icongeek26">Icongeek26</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
您只是將標簽錯誤地放在上面的代碼中。嘗試修復并將影像和文本放在一行上。
uj5u.com熱心網友回復：
你的代碼有一個錯誤，那就是你沒有正確關閉 div.in 標簽，我希望這能解決問題
uj5u.com熱心網友回復：
我認為你最后有 2 個額外的沒有關閉任何標簽，如果你想使用 div.in 作為行，你應該首先為容器分配一個寬度
.container{ diplay:flex; gap: 52px; width: 100%; justify-content:center; flex-wrap: wrap}
最后，從容器中取出頁腳，因為它是絕對定位的，因為它是 flex 標簽的子元素而丟失它的屬性是沒有意義的
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/508205.html
標籤：javascript html css