Question

如果我将图像添加到主菜单项容器 div中，则div会相对于其余项目向下移动（请参阅代码段）。我正在尝试使用网格结构创建移动布局，这会根据屏幕宽度改变每行的项目数。这似乎工作正常，除了div下降。

body {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: red;
}

.main-menu-container-outer {
  padding: 0;
  margin: 0;
  text-align: center;
  background-color: green;
}

.main-menu-container-inner {
  padding: 0;
  margin: 0;
  text-align: left;
  background-color: yellow;
}

.main-menu-item-container {
  display: inline-block;
  background-color: #0070a3;
  text-align: center;
  padding: 0;
  border-radius: 7px;
  width: 104px;
  height: 116px;
  margin: 6px;
  font-family: "Arial";
  font-size: 14px;
}

.main-menu-item-icon {
  width: 64px;
  height: 64px;
  margin: 10px 0 4px 0px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>

<body>

  <div class="main-menu-container-inner">

    <div id="1" class="main-menu-item-container">

    </div>

    <div id="menu-item-news" class="main-menu-item-container">
      <img class="main-menu-item-icon" src="media/menu/icon-news.png"><br> News Feed
    </div>

    <div id="3" class="main-menu-item-container">

    </div>
    <div id="4" class="main-menu-item-container">

    </div>
    <div id="5" class="main-menu-item-container">

    </div>



    <div id="6" class="main-menu-item-container">

    </div>
    <div id="7" class="main-menu-item-container">

    </div>
    <div id="8" class="main-menu-item-container">

    </div>
    <div id="9" class="main-menu-item-container">

    </div>
    <div id="10" class="main-menu-item-container">

    </div>
    <div id="11" class="main-menu-item-container">

    </div>
    <div id="12" class="main-menu-item-container">

    </div>
    <div id="13" class="main-menu-item-container">

    </div>
    <div id="14" class="main-menu-item-container">

    </div>
    <div id="15" class="main-menu-item-container">

    </div>
    <div id="16" class="main-menu-item-container">

    </div>
    <div id="17" class="main-menu-item-container">

    </div>
    <div id="18" class="main-menu-item-container">

    </div>
    <div id="19" class="main-menu-item-container">

    </div>
    <div id="20" class="main-menu-item-container">

    </div>

    <div id="vehicles" class="main-menu-item-container">
      <img class="main-menu-item-icon" src="media/menu/icon-vehicle.png">
    </div>

    <div id="21" class="main-menu-item-container">

    </div>

  </div>

</body>

</html>

为什么在添加图像时我的div会向下移动

0 个答案: