水平排列图像但不在同一水平

Question

我有以下 div:

<div id="features">
    <div class="wrapper">
        <ul>
            <li class="feature-1"><a href="#"><img      src="img/black/blackMainImg.jpg" height="400px" width="180px"></a></li>
            <li class="feature-2"><a href="#"><img src="img/blue/blueMainImg.jpg" height="400px" width="180px"></a></li>
            <li class="feature-3"><a href="#"><img src="img/green/greenMainImg.jpg" height="400px" width="180px"></a></li>
            <li class="feature-4"><a href="#"><img src="img/red/redMainImg.jpg" height="400px" width="180px"></a></li>
            <li class="feature-5"><a href="#"><img src="img/yellow/yellowMainImg.jpg"height="400px" width="180px"></a></li>
            <div class="clear"></div>
        </ul>
    </div>

并且我希望图像大小相同但级别不同我无法上传照片，但我附上了一个 link 的页面，这是我的意思的一个很好的例子 http://www.wix.com/website-template/view/html/760?originUrl=http%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fall%2F32&bookName=new-ecom&galleryDocIndex=0&category=all&metaSiteId=

Answer 1

如果我答对了你的问题，这是一种方法。

.wrapper ul {
   display: flex;
  }
.wrapper ul li {
   margin: 10px;
   list-style: none;
  }
.wrapper ul li:nth-child(odd) {
    margin-top: 50px !important;
  }

    <div class="wrapper">
        <ul>
            <li class="feature-1"><a href="#"><img      src="img/black/blackMainImg.jpg" height="400px" width="180px"></a></li>
            <li class="feature-2"><a href="#"><img src="img/blue/blueMainImg.jpg" height="400px" width="180px"></a></li>
            <li class="feature-3"><a href="#"><img src="img/green/greenMainImg.jpg" height="400px" width="180px"></a></li>
            <li class="feature-4"><a href="#"><img src="img/red/redMainImg.jpg" height="400px" width="180px"></a></li>
            <li class="feature-5"><a href="#"><img src="img/yellow/yellowMainImg.jpg"height="400px" width="180px"></a></li>
            <div class="clear"></div>
        </ul>
    </div>

Answer 2

你可以这样解决：

.wrapper li {
    float: left; /* Puts them on the same row. */
    margin: 10px; /* Some space around them. */
    list-style: none; /* Remove the bullet point. */
}

/* Individual top margins for the different list items. */
li.feature-1 { margin-top: 20px; }
li.feature-2 { margin-top: 40px; }
li.feature-3 { margin-top:  0px; }
/* ...and so on... */

您也可以按照其他答案中的建议使用 nth-child() 伪选择器，但它在 IE 8 及以下版本中不起作用（不是大问题，但仍然如此）。

Answer 3

我创建了类似的东西，但没有图像，因为我没有它们

https://jsfiddle.net/cjqzpb7p/

<div id="features">
    <div class="wrapper">
        <ul>
            <li class="feature-1"><a href="#">Hi</a></li>
            <li class="feature-2"><a href="#">Block</a></li>
            <li class="feature-3"><a href="#">Blockz</a></li>
            <li class="feature-4"><a href="#">Blocks</a></li>
            <li class="feature-5"><a href="#">Blockx</a></li>
        </ul>
    </div>
</div>


#features li {
   height: 400px;
   background: red;
   width: 180px;
   display: block;
   list-style-type: none;
   float: left;

   &:nth-child(2n+2) {
      margin: 50px 20px 0 20px;
   }
}

标记 CSS 在 SASS

中完成

水平排列图像但不在同一水平

ordering images horizontally but not on the same level

html

javascript

css

css-float