添加后background-image
到我的div
元素,它没有在网格中正确对齐。
我最初尝试实际放置一个 <img>
<div>
中的标签但后来我把它改成了background-image
.现在它就像一个 block 显示元素,因为它占据了整行并将应该显示在同一行上的其他三个推到它下面的一个,但它没有显示底部的边距,所以我真的不知道发生了什么。
HTML
<!-- Container for body content -->
<div id="bodyContent">
<!-- If we can find a way to make this enable us to simply put a game in a list and it automatically
place it accodingly, change this to that system. Maybe make just one column and have it wrap content? -->
<div id="adBarLeft" class="adBar"> AD BAR </div>
<div id="gameColumn">
<div class="gamePreview" id="game1"> </div>
<div class="gamePreview"> 2 </div>
<div class="gamePreview"> 3 </div>
<div class="gamePreview"> 4 </div>
<div class="gamePreview"> 5 </div>
<div class="gamePreview"> 6 </div>
<div class="gamePreview"> 7 </div>
<div class="gamePreview"> 6 </div>
<div class="gamePreview"> 9 </div>
<div class="gamePreview"> 10 </div>
</div>
<div id="adBarRight" class="adBar"> AD BAR </div>
</div>
CSS
.gamePreview {
display: inline-block;
width: 20%;
height: 0;
padding-bottom:20%;
border:3px solid orange;
margin:1.5%; /* Figure out why this value let 4 on compared to 2.5% which didnt, but should've */
}
#game1 { /* figure out why its setting it off from the others */
background-image: url("https://is1-ssl.mzstatic.com/image/thumb/Purple71/v4/47/cf/cf/47cfcf79-9e1d-b21f-8e10-2658b7650c15/mzl.oiljceng.png/246x0w.jpg");
background-size: contain;
}
我希望图像加载到 <div>
中在同一行有四个,然后绕到下一行,基本上用 4 <div>
制作行的
最佳答案
将 vertical-align: top;
添加到您的 .gamePreview
类以将内联 block 对齐到顶部。
.gamePreview {
display: inline-block;
width: 20%;
height: 0;
padding-bottom: 20%;
border: 3px solid orange;
margin: 1.5%;
vertical-align: top; /* Add this */
/* Figure out why this value let 4 on compared to 2.5% which didnt, but should've */
}
#game1 {
/* figure out why its setting it off from the others */
background-image: url("https://is1-ssl.mzstatic.com/image/thumb/Purple71/v4/47/cf/cf/47cfcf79-9e1d-b21f-8e10-2658b7650c15/mzl.oiljceng.png/246x0w.jpg");
background-size: contain;
}
<!-- Container for body content -->
<div id="bodyContent">
<!-- If we can find a way to make this enable us to simply put a game in a list and it automatically
place it accodingly, change this to that system. Maybe make just one column and have it wrap content? -->
<div id="adBarLeft" class="adBar"> AD BAR </div>
<div id="gameColumn">
<div class="gamePreview" id="game1"> </div>
<div class="gamePreview"> 2 </div>
<div class="gamePreview"> 3 </div>
<div class="gamePreview"> 4 </div>
<div class="gamePreview"> 5 </div>
<div class="gamePreview"> 6 </div>
<div class="gamePreview"> 7 </div>
<div class="gamePreview"> 6 </div>
<div class="gamePreview"> 9 </div>
<div class="gamePreview"> 10 </div>
</div>
<div id="adBarRight" class="adBar"> AD BAR </div>
</div>
关于html - 添加背景图像后 Div 元素未正确对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55639536/