我目前正在制作一個涉及影像的網站。我使用了來自https://plchldr.co/i/336x280?&bg=ffffff&text=的影像。影像的代碼是：
<div style = "padding: 20px 0px;">
<img class = "project" src = "https://plchldr.co/i/336x280?&bg=ffffff&text=">
</div>
<div style = "padding: 20px 0px;">
<img class = "project" src = "https://plchldr.co/i/336x280?&bg=ffffff&text=" >
</div>
<div style = "padding: 20px 0px;">
<img class = "project" src = "https://plchldr.co/i/336x280?&bg=ffffff&text=">
</div>
但是，當我這樣做時，影像是垂直堆疊的，而不是水平堆疊的。我正在使用text-align: center;整個身體，但我認為這不會影響這一點。如果您想查看網站的代碼，請訪問codeitfast.xyz
我試過在盒子周圍放填充物。但是，當我這樣做時，它們周圍有陰影，而且看起來很糟糕（我使用的是盒子陰影）。我還嘗試向 div 添加填充。這些都沒有幫助，我對大多數建議持開放態度。
uj5u.com熱心網友回復：
DIV 默認為 100% 寬，因此您需要設定包裝 DIV 的寬度，將它們設定為 inline-block 以便它們水平對齊，然后設定相對于包裝 DIV 類的影像寬度。
<!doctype html>
<html lang="en">
<head>
<style>
.project{
width:100%;
}
.projectWrapper{
display:inline-block;
width:calc( 33% );
padding: 20px 0px;
}
</style>
</head>
<body>
<div class="projectWrapper">
<img class = "project" src = "https://plchldr.co/i/336x280?&bg=ff0000&text=">
</div>
<div class="projectWrapper">
<img class = "project" src = "https://plchldr.co/i/336x280?&bg=ffff00&text=" >
</div>
<div class="projectWrapper">
<img class = "project" src = "https://plchldr.co/i/336x280?&bg=000fff&text=">
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/446181.html
上一篇：使用位置絕對元素防止陰影出血？