CSS Grid布局/图像定位问题

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 s不要垂直重新定位元素。它们只能水平漂浮。

如果你想垂直“漂浮”（即平铺），您将需要使用JavaScript。我建议t he jQuery Masonry Plugin或Vanilla Masonry（jQuery Masonry减去jQuery）。

Answer 2

查看此处的界面。让我知道你是否需要修改。

正是被要求提供 -http://jsfiddle.net/rxLTG/

HTML

<div class="wrap"> 
    <div class="row"> 
     <img class="lg" src="" alt="1" /> 
     <img class="sm" src="" alt="2" /> 
     <img class="sm" src="" alt="3" /> 
     <img class="sm" src="" alt="4" /> 
     <img class="sm" src="" alt="5" /> 
    </div> 
    <div class="row"> 
     <img class="sm" src="" alt="6" /> 
     <img class="sm" src="" alt="7" /> 
     <img class="lg" src="" alt="8" /> 
     <img class="sm" src="" alt="9" /> 
     <img class="sm" src="" alt="10" /> 
    </div> 
</div> 

CSS

.wrap {width:650px;} 
.wrap img {float:left; width:150px; height:100px;} 
.wrap img.lg {width:350px; height:200px;} 
.row.odd .lg, .row:nth-child(even) .lg {float:right;}​ 

JS

$(function() { 
    $('.row:odd').addClass('odd');​ 
}); 

Answer 3

一个更好的方式是这样的 - http://jsfiddle.net/rxLTG/2/

HTML

<div class="wrap"> 
    <img class="lg" src="" alt="1" /> 
    <img class="sm" src="" alt="2" /> 
    <img class="sm" src="" alt="3" /> 
    <img class="sm" src="" alt="4" /> 
    <img class="sm" src="" alt="5" /> 
    <img class="lg2" src="" alt="6" /> 
    <img class="sm" src="" alt="7" /> 
    <img class="sm" src="" alt="8" /> 
    <img class="sm" src="" alt="9" /> 
    <img class="sm" src="" alt="10" /> 
    <img class="lg" src="" alt="11" /> 
    <img class="sm" src="" alt="12" /> 
    <img class="sm" src="" alt="13" /> 
    <img class="sm" src="" alt="14" /> 
    <img class="sm" src="" alt="15" /> 
    <img class="lg2" src="" alt="16" /> 
    <img class="sm" src="" alt="17" /> 
    <img class="sm" src="" alt="18" /> 
    <img class="sm" src="" alt="19" /> 
    <img class="sm" src="" alt="20" /> 
</div> 

CSS

.wrap {width:500px;} 
.wrap img {float:left; width:125px; height:100px;} 
.wrap img.lg {width:250px; height:200px;} 
.wrap img.lg2 {width:250px; height:200px;float:right;}​ 

世界上没有需要定义一个DIV中的每一行，因为他们会自动适应和包裹。

另外，如果你第一（左或右）漂浮在每一行的大图像，然后其他四将适合地方没有任何需要的JavaScript。

然后每五个数字就是一个大图像（1,6,11,16,21等）。如果您希望它可以免费使用JavaScript，请使用此解决方案。如果你想保留你原来的编号系统，那么使用上面的解决方案。

Answer 4

你可以把它看作一个网格。更多的标记，但也可以重用和响应。 对于这个例子，你可以用一个类来处理这个网格布局，这个类使用它的一半容器。

第一行： - 1的1/2柱：有1个大的图像 - 柱的1/2 1：具有4个列（每个1/2，并且每个包含小图像）

二行：刚刚反转第一1/2列

列被浮置，所以第4栏和第5将下1和2堆叠...您的图像，必须在正确的纵横比过。

最后，因为你的浮动元素，clearfix组。

希望它有帮助。

/* Micro clearfix for the wrapper */ 
 
.wrap:before, 
 
.wrap:after { 
 
    content: ''; 
 
    display: table 
 
} 
 
.wrap:after { 
 
    clear: both; 
 
} 
 
.wrap { width:650px; } 
 
/* no need for size if you put the right images */ 
 
img { 
 
    width:100%; 
 
    height: auto; 
 
    vertical-align: middle; /* removes the gap beneth the image */ 
 
} 
 
/* you can go further and create some other columns */ 
 
.col-1-2 { 
 
    float: left; 
 
    width: 50%; 
 
} 
 
/* demo purpose only */ 
 
img { 
 
    width: 100%; 
 
    height: 100px; 
 
} 
 
img.lg { height: 200px; } 
 

<div class="wrap"> 
 
    <!-- one half of the wrapper --> 
 
    <div class="col-1-2"> 
 
     <img class="lg" src="" alt="1" /> 
 
    </div> 
 
    <!-- one half of the wrapper --> 
 
    <div class="col-1-2">    
 
     <!-- one half of the columns :: 1/4 --> 
 
     <div class="col-1-2">    
 
      <img class="" src="" alt="2" /> 
 
     </div> 
 
     <div class="col-1-2">    
 
      <img class="" src="" alt="3" /> 
 
     </div> 
 
     <div class="col-1-2">    
 
      <img class="" src="" alt="4" /> 
 
     </div> 
 
     <div class="col-1-2">    
 
      <img class="" src="" alt="5" /> 
 
     </div> 
 
    </div> 
 

 
    <!-- then reverse --> 
 
    <div class="col-1-2"> 
 
     <div class="col-1-2">    
 
      <img class="" src="" alt="6" /> 
 
     </div> 
 
     <div class="col-1-2">    
 
      <img class="" src="" alt="7" /> 
 
     </div> 
 
     <div class="col-1-2">    
 
      <img class="" src="" alt="8" /> 
 
     </div> 
 
     <div class="col-1-2">    
 
      <img class="" src="" alt="9" /> 
 
     </div> 
 
    </div>    
 
    <div class="col-1-2"> 
 
     <img class="lg" src="" alt="10" /> 
 
    </div>  
 
</div>