【发布时间】：2017-11-23 00:28:58
【问题描述】：
我有一个图像网格，我想在此处的图像中显示它们：
不幸的是，最下面的一排被向下推而失去了对齐。
我正在改编 Graham Miller 的响应式网格系统，非常棒。这是我到目前为止的代码：
CSS：
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF SIX */
.span_6_of_6 {
width: 100%;
}
.span_5_of_6 {
width: 83.06%;
}
.span_4_of_6 {
width: 66.13%;
}
.span_3_of_6 {
width: 49.2%;
}
.span_2_of_6 {
width: 32.26%;
height: 350px;
}
.span_1_of_6 {
width: 15.33%;
}
img {
width: 100%;
height: auto;
}
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 { width: 100%; }
}
HTML：
<div class="section group">
<div class="col span_2_of_6"><img src="images/slices02.png" alt=""/></div>
<div class="col span_1_of_6"><img src="images/slices02.png" alt=""/></div>
<div class="col span_1_of_6"><img src="images/slices03.png" alt=""/></div>
<div class="col span_1_of_6"><img src="images/slices04.png" alt=""/></div>
<div class="col span_1_of_6"><img src="images/slices05.png" alt=""/></div>
<div class="col span_1_of_6"><img src="images/slices06.png" alt=""/></div>
<div class="col span_1_of_6"><img src="images/slices07.png" alt=""/></div>
<div class="col span_1_of_6"><img src="images/slices08.png" alt=""/></div>
<div class="col span_1_of_6"><img src="images/slices09.png" alt=""/></div>
</div>
<div class="section group">
<div class="col span_1_of_6"><img src="images/slices04.png" alt=""/></div>
<div class="col span_1_of_6"><img src="images/slices05.png" alt=""/></div>
<div class="col span_1_of_6"><img src="images/slices06.png" alt=""/></div>
<div class="col span_1_of_6"><img src="images/slices07.png" alt=""/></div>
<div class="col span_1_of_6"><img src="images/slices08.png" alt=""/></div>
<div class="col span_1_of_6"><img src="images/slices09.png" alt=""/></div>
</div>
<div class="section group">
<div class="col span_1_of_6"><img src="images/slices02.png" alt=""/></div>
<div class="col span_1_of_6"><img src="images/slices03.png" alt=""/></div>
<div class="col span_1_of_6"><img src="images/slices04.png" alt=""/></div>
<div class="col span_1_of_6"><img src="images/slices05.png" alt=""/></div>
<div class="col span_2_of_6"><img src="images/slices02.png" alt=""/></div>
<div class="col span_1_of_6"><img src="images/slices06.png" alt=""/></div>
<div class="col span_1_of_6"><img src="images/slices07.png" alt=""/></div>
<div class="col span_1_of_6"><img src="images/slices08.png" alt=""/></div>
<div class="col span_1_of_6"><img src="images/slices09.png" alt=""/></div>
</div>
我尝试了几件事，包括将五张图片的底行向左浮动、稍微调整图片大小以及其他绝望的措施，但都无济于事。
有人知道这个问题怎么解决吗？
【问题讨论】：
-
看起来就像
display:grid的情况。见this codepen -
基本上只有一种布局方法可以做到这一点，那就是CSS-Grid
-
CSS 网格布局：stackoverflow.com/q/44377343/3597276
-
fen1x - 这是一个最优雅的解决方案。它看起来很棒：advent-calendar.trainstorm.co.uk/grid-nice2.html 我正在努力让它响应。有什么建议吗？
标签： html css grid-layout