Question

我有以下HTML代码：

<div><p>Recollida</p></div>
  <div ng-repeat="image in images">
    <a ng-href="{{image.path}}" class="imageAnchor">
      <figure>
        <img ng-src="{{image.path}}" alt="">
      </figure>
    </a>
</div>

现在我想以4行显示图像，我希望每行具有相同的高度。我一直在努力解决这个问题，我想知道是否有任何方法可以实现这一点，或者是否更好地寻找另一种解决方案。上面代码中的<div>最初位于具有确定高度的较大<div>内。

Answer 1

使用flex

试试这个

<div class="imagesContainer">
   <div ng-repeat="image in images" class="imageContainer">
       <a ng-href="{{image.path}}" class="imageAnchor">
          <figure>
             <img ng-src="{{image.path}}" alt="">
          </figure>
      </a>
   </div>
</div>


.imagesContainer{
  display:flex;
  width:100%;
}
.imageContainer{
 width:25%;
}

http://jsfiddle.net/Lsp2f5hk/

在此处阅读有关flex的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

css：样式图像网格

1 个答案: