html - CSS 网格布局/图像定位问题

Question

尝试将正确放置图像的页面放在一起时遇到一些问题。附上我目前所拥有的内容的屏幕截图。如果有意义的话，我想要达到的效果看起来像是页面的第一行图像 (1-5)，而其他每一行都在对面。图像 1-8 设置正确，但 9-10 在第 3 行而不是我想要的第 2 行。图 11 应在左侧，图 12-15 应在右侧。等等..

当前的 CSS –

    #grid { float: left; width: 100%; overflow: hidden; }
#grid-inner { float: left; width: 890px; overflow: hidden;  }
.item { float: left; margin: 0 0 10px 0; position: relative; }
.item span { display: none; position: absolute; padding: 0 0 0 0; color: #fff; background: transparent url('../images/back-work.png') 0 0 repeat; }
.item span a { color: #fff; display: block; height: 100%; width: 100%; }
.small { width: 210px; height: 125px; }
.large { width: 420px; height: 260px; }
.small span { width: 210px; height: 125px; padding: 0 0 0 0; }
.large span { width: 420px; height: 260px; padding: 0 0 0 0; }
#project { float: left; width: 100%; }
#project-content { float: left; width: 100%; border-top: 1px solid #ccc; margin: 0 0 0 0; padding: 0 0 0 0; }
#project-content-alpha { float: left; width: 200px; }
#project-content-beta { float: left; width: 410px; }
#project-content-gamma { float: right; width: 200px; text-align: right; }
    #project-content-alpha span.light { color: #999; }
#project-images { float: left; width: 100%; }
#project-images img { float: left; width: 100%; margin: 0 0 0 0; }
#project-pagination { float: left; width: 100%; margin: 0 0 0 0; }
#project-pagination-alpha { float: left; width: 200px; }
#project-pagination-beta { float: right; width: 200px; text-align: right; }

当前标记 –

    <div id="grid">
<div id="grid-inner">


<div class="item large">
<span><a href="" title="">ONE</a></span>
<a href="" title="ONE"><img src="" width="420" height="260" alt="ONE" /></a>
</div>



<div class="item small">
<span><a href="" title="">TWO</a></span>
<a href="" title=""><img src="" width="210" height="125" alt="TWO" /></a>
</div>



<div class="item small">
<span><a href="" title="">THREE</a></span>
<a href="" title=""><img src="" width="210" height="125" alt="THREE" /></a>
</div>



<div class="item small">
    <span><a href="" title="">FOUR</a></span>
<a href="" title=""><img src="" width="210" height="125" alt="FOUR" /></a>
</div>



<div class="item small">
<span><a href="" title=""></a></span>
<a href="" title=""><img src="" width="210" height="125" alt="FIVE" /></a>
</div>



    <div class="item small">
<span><a href="" title=""></a></span>
<a href="" title=""><img src="" width="210" height="125" alt="SIX" /></a>
</div>



<div class="item small">
<span><a href="" title=""></a></span>
<a href="" title=""><img src="" width="210" height="125" alt="SEVEN" /></a>
</div>



<div class="item large">
<span><a href="" title=""></a></span>
<a href="" title=""><img src="" width="420" height="260" alt="EIGHT" /></a>
</div>

如有任何帮助或建议，我们将不胜感激。提前致谢!

Answer 1

CSS float 不会垂直重新定位元素。它们只能水平 float 。

如果您想要垂直“ float ”(即平铺)，则需要使用 JavaScript。我推荐 t he jQuery Masonry Plugin或 Vanilla Masonry (jQuery Masonry 减去 jQuery)。