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>

我希望图像的大小相同，但不同级别我无法上传照片，但我附上了一个页面的链接，这是我的意思的一个很好的例子 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;
   }
}

在SASS中完成标记CSS

水平排序图像但不在同一级别

3 个答案: