Question

在我的background-image元素中添加div后，它在网格中的排列不正确。

我最初尝试在<img>中实际放置一个<div>标记，但是后来我将其更改为background-image。现在，它就像一个块显示的元素一样，因为它占据了整行，并将应该显示在同一行上的其他三个推到它下面的一行，但是在底部没有显示空白，因此我真的不知道发生了什么事。

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>

Answer 1

将vertical-align: top;添加到您的.gamePreview类中，以将内联代码块对齐到顶部。

.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>

Answer 2

我认为在父容器display:flex中使用#gameColumn会更好，因为DIV可以容纳空间

#gameColumn{
    display: flex;
  	flex-wrap: wrap;
}

.gamePreview {
    flex-basis: 100px;
    height: 100px;
    border:3px solid orange;
    margin:2px; /* 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;
  background-repeat: no-repeat;
}

<!-- 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>

Answer 3

这是因为类名“adBar”。似乎当我们在浏览器中安装了 adblock 时，扩展程序似乎阻止了选择器名称 'adbar'/'adBar'。尝试关闭页面的广告拦截。它会起作用。

添加背景图像后，div元素未对齐

3 个答案: