Question

我正在尝试使用Materialise CSS框架构建布局。我附上了一张大致上我想要实现的图像（样本A）。不幸的是，第二行的右侧有一列比其他正方形长。它会导致下一行被推低，在左侧所有列下面留下一个空白区域并抛弃偏移量（样本B）。有没有办法可以覆盖它并使它看起来像样品A？

我已经尝试过在第二行使用flexbox，但是当我这样做时，无论我为每个图块设置的“flex grow”，块的大小与第一行中的tile都不匹配。

我已经包含了目前为止的代码。

<div id="icon-area">
<div class="row">
      <div id="squareicon1" class="square-icon col s4">
        <a href="#"><img class="iconpic" src="res/icons/pic1.jpg"></a>
      </div>
      <div id="squareicon2" class="square-icon col s4">
        <a href="#"><img class="iconpic" src="res/icons/pic2.jpg"></a>
      </div>
      <div id="squareicon3" class="square-icon col s4">
        <a href="#"><img class="iconpic" src="res/pic3.jpg"></a>
      </div>
    </div>


   <div class="row">
      <div id="squareicon1" class="square-icon col s4">
        <a href="#"><img class="iconpic" src="res/icons/pic4.jpg"></a>
      </div>
        <a href="#"><img id="btdimg" src="res/icons/pic5.jpg"></a>
    </div>

    <div class="row" id="fbrow">
      <div id="squareicon1" class="square-icon col s4">
        <a href="#"><img class="iconpic" src="res/icons/pic6.jpg"></a>
      </div>
    </div>

    <div class="row">
      <div id="squareicon1" class="square-icon col s4">
        <a href="#"><img class="iconpic" src="res/icons/pic7.jpg"></a>
      </div>
    </div>

    <div class="row">
      <div id="squareicon1" class="square-icon col s4">
        <a href="#"><img class="iconpic" src="res/icons/pic8.jpg"></a>
      </div>
      <div id="squareicon1" class="square-icon col s8">
        <a href="#"><img class="iconpic" src="res/icons/pic9.jpg"></a>
      </div>
    </div>

    <div class="row">
      <div id="squareicon1" class="square-icon col s4">
        <a href="#"><img class="iconpic" src="res/icons/pic10.jpg"></a>
      </div>
      <div id="squareicon1" class="square-icon col s4">
        <a href="#"><img class="iconpic" src="res/icons/pic11.jpg"></a>
      </div>
      <div id="squareicon1" class="square-icon col s4">
        <a href="#"><img class="iconpic" src="res/icons/pic12.jpg"></a>
      </div>
    </div>
  </div>
</div>

就CSS而言。如下。虽然，我依靠Materialize来获得列和行间距。

#icon-area{
  padding: 0px !important;
  min-width: 100%;
  margin: 0px !important;
}
.square-icon{
  border-style: outset;
  padding: 0px !important;
}
.iconpic{
  width:100%;
}
div.row{
  margin: 0px !important;
}

我觉得这些解决方案非常简单。我只是没能想到任何优雅的解决方案;相反，任何解决方案。

如何使布局行忽略空列？

0 个答案: