Question

在我的页面上，我有很多元素，我需要连续几列直列显示。每个元素都是相同大小的图像。当您单击它时，在它的位置会出现一个带有树图标的菜单。所有元素应水平和垂直居中。图标菜单中可能有不同数量的大图像（6,7,8或更多）和1到9个元素。带图标的块应与带图像的块大小相同。图像的最大宽度和高度为300px，图标的最大宽度和高度为100px。每个元素（图标或图像）块的最大宽度和高度应为350px，填充为3.5％。现在，我认为我做的一切都是正确的，但页面钢铁上的元素逻辑似乎已被打破。

My codepen example

<div class="item">
          <div class="logo">
            <img src="http://i.imgur.com/HyOMQFC.png">
          </div>
        </div>
        <div class="item">
          <div class="links">
            <a href="#"><img src="http://i.imgur.com/wK9D1Ji.png"></a>
            <a href="#"><img src="http://i.imgur.com/wK9D1Ji.png"></a>
            <a href="#"><img src="http://i.imgur.com/wK9D1Ji.png"></a>
            <a href="#"><img src="http://i.imgur.com/wK9D1Ji.png"></a>
            <a href="#"><img src="http://i.imgur.com/wK9D1Ji.png"></a>
            <a href="#"><img src="http://i.imgur.com/wK9D1Ji.png"></a>
            <a href="#"><img src="http://i.imgur.com/wK9D1Ji.png"></a>
            <a href="#"><img src="http://i.imgur.com/wK9D1Ji.png"></a>
            <a href="#"><img src="http://i.imgur.com/wK9D1Ji.png"></a>
          </div>
        </div>
        <div class="item">
          <div class="logo">
            <img src="http://i.imgur.com/HyOMQFC.png">
          </div>
        </div>

CSS

.item {
  display: inline-block;
  max-width: 350px;
  max-height: 350px;
}

.logo,
.links {
  padding: 3.5% 3.5%;
  width: 100%;
  max-width: 300px;
  max-height: 300px;
  display: inline;
  margin: 3.5%;
}

.logo img {
  width: 100%;
  max-width: 300px;
    display: inline;
}

.links img {
  width: 33%;
  max-width: 100px;
  margin: 0px;
  padding: 0px;
    display: inline;
}

我得到了什么

我需要什么

Answer 1

您需要将vertical-align:middle放在items上。

您还需要更改大小，因为目标比其他目标更大，方法是将内联更改为内联块以调整项目大小。

连续元素的差距

1 个答案: