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; }

当前标记 -</p>

    <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

CSSfloat不会垂直重新定位元素。它们只能水平浮动。

If you want vertical "floats" (i.e. tiling), you will need to use JavaScript. I recommend the jQuery Masonry Plugin or Vanilla Masonry (jQuery Masonry minus the jQuery).

Answer 2

Check out the interface here. Let me know if you need revisions.

EXACTLY WHAT WAS ASKED FOR - 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

A better way would be like this - 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;}​

Theres no need to define each row inside a div, because they will automatically fit and wrap round.

Also, if you float the large image on each row first (left or right), then the other four will fit into place without any javascript needed.

然后每五个数字将是一个大图像（1、6、11、16、21 等）。如果您希望它免费使用 javascript，请使用此解决方案。如果您想保留原始编号系统，请使用上述解决方案。

Answer 4

您可以将其视为网格。更多标记，但也可重用和响应。例如，您可以使用一个占用一半容器的类来处理此网格布局。

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

第二行：只需反转前 1/2 列

列是浮动的，因此第 4 列和第 5 列将堆叠在 1 和 2 之下……您的图像也必须具有正确的纵横比。

最后，由于您是浮动元素，请清除组。

希望能帮助到你。

/* 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>