一个列表，简单的向左浮动，不同的单元格大小答案

【问题标题】：One list, simple float left, different cell sizes一个列表，简单的向左浮动，不同的单元格大小
【发布时间】：2011-06-07 17:29:12
【问题描述】：

我有一个很好的挑战给你。这里有下一个代码（现场示例：http://inturnets.com/test/test.html）：

    <!DOCTYPE html><html><head><title></title>
<style type="text/css">* {
        margin: 0;
        padding: 0;}a, a:hover {
        text-decoration: none;
    }
    .grid {
        width: 984px;
        margin: 0 auto;
        list-style: none;
        height: 666px;
    }
    .grid li {
        float: left;
        position: relative;
    }
    .small + .small {
        position: relative;
        clear: left;
    }
    .large, .large a {
        width: 393px;
        height: 222px;
    }
    .small, .small a {
        width: 198px;
        height: 111px;
    }
    .small a, .large a {
        display: block;
        cursor: pointer;
        color: #fff;
    }
    .overlay {
        background: #000;
        width: 100%;
        height: 22px;
        color: #fff;
        opacity: 0;
        position: absolute;
        top: 0;
    }
    </style>
    </head>
    <body>

    <ul class="grid">
      <li class="item small"><a href="#" title="Title 1"><div class="overlay">Title 1</div><img src="img/squares.png" border="0" width="198" height="111" /></a></li>
      <li class="item small"><a href="#" title="Title 2"><div class="overlay">Title 2</div><img src="img/space.png" border="0" width="198" height="111" /></a></li>
      <li class="item large"><a href="#" title="Title 3"><div class="overlay">Title 3</div><img src="img/arch.png" border="0" width="393" height="222" /></a></li>
      <li class="item large"><a href="#" title="Title 4"><div class="overlay">Title 4</div><img src="img/tree.png" border="0" width="393" height="222" /></a></li>
      <li class="item large"><a href="#" title="Title 5"><div class="overlay">Title 5</div><img src="img/arch.png" border="0" width="393" height="222" /></a></li>
      <li class="item large"><a href="#" title="Title 6"><div class="overlay">Title 6</div><img src="img/tree.png" border="0" width="393" height="222" /></a></li>
      <li class="item small"><a href="#" title="Title 7"><div class="overlay">Title 7</div><img src="img/squares.png" border="0" width="198" height="111" /></a></li>
      <li class="item small"><a href="#" title="Title 8"><div class="overlay">Title 8</div><img src="img/space.png" border="0" width="198" height="111" /></a></li>
      <li class="item large"><a href="#" title="Title 9"><div class="overlay">Title 9</div><img src="img/tree.png" border="0" width="393" height="222" /></a></li>
      <li class="item small"><a href="#" title="Title 10"><div class="overlay">Title 10</div><img src="img/squares.png" border="0" width="198" height="111" /></a></li>
      <li class="item small"><a href="#" title="Title 11"><div class="overlay">Title 11</div><img src="img/space.png" border="0" width="198" height="111" /></a></li>
      <li class="item large"><a href="#" title="Title 12"><div class="overlay">Title 12</div><img src="img/arch.png" border="0" width="393" height="222" /></a></li>
    </ul>
    </body>
    </html>

任务：

一个列表（好的）
simple float:left for the LI's (ok)
像下一张图片一样对齐单元格（尚未完成）

提示：

如您所见，第二个 .small 类具有相对位置
第二个小号不需要什么特别的东西
你需要做一些其他的事情
因此您需要将项目推回正确位置
然后你需要修复它留下的空白空间

【问题讨论】：

您应该替换 img/squares.png 等。图片来自dummyimage.com。
现场示例：inturnets.com/test/test.html

标签： html css layout

【解决方案1】：

@hun i Try from my side 可能对你有帮助：

.small + .small {
        position: relative;
        margin-left:-198px;
        margin-top:111px
    }

【讨论】：

肯定是最简单的解决方案。当我尝试这个时，那个鬼鬼祟祟的clear: left 把我搞砸了，没有注意到。

【解决方案2】：

我不确定如何使用浮点数。

这是一个使用display: inline-block 的解决方案。

我可以看到我的代码显示和您的目标图片之间的唯一区别是右侧两个小图像的顺序是颠倒的。

但是，我不会尝试修复它，因为您的目标图片中的图像顺序是错误的（或者我认为是错误的）：

您的源代码有：

Image 6 - img/tree.png
Image 7 - img/squares.png
Image 8 - img/space.png

但在你的目标图片中，space 在squares 之上，这与“两个小图像”的其他实例不一致。

事不宜迟：

变化：

我删除了<li> 标签之间的空格。 You could workaround having to do this.

新的 CSS：

.grid li {
    position: relative;
    display: inline-block;
    vertical-align: top;

    *display: inline;
    zoom: 1
}
.small + .small {
    position: relative;
    clear: left;
    top: 111px;
    margin-left: -198px
}

我包含了使 display: inline-block 在 IE7 中工作所需的技巧。
在 IE7/8 和最新版本中测试：Chrome、Firefox、Safari、Opera。

【讨论】：

+1 似乎是另一个很好的解决方案。我认为“交换图像”的东西并不是真正的问题，看看原始的 HTML（我们俩都做过）。我认为问题中包含的图像可以视为插图。如果 OP 交换 HTML 中的图像，它们将以正确的方式出现在您和我的解决方案中。
感谢您的努力！我将使用的代码来自@sandeep。图片的顺序是正确的，只是为了回应你之前的消息。非常有趣的解决方案也是你的。我会记住的。投票；）

【解决方案3】：

我创建了一个working demo。

我去掉了你出现的标题 div，稍微缩短了 HTML，并将所有内容保持在最低限度，所以最终的 CSS 如下所示：

ul,li { margin: 0; padding: 0; }
a, a:hover { text-decoration: none; }

.grid { width: 984px; margin: 0 auto; list-style: none; height: 666px; }
.grid li { float: left; position: relative; }
.small + .small { margin: 111px 0 0 -198px; }
.large, .large a, .large img { width: 393px; height: 222px; }
.small, .small a, .small img { width: 198px; height: 111px; }
.item a { display: block; cursor: pointer; color: #fff; }

从这个基础上，添加那些标题 div 和东西似乎是安全的。

仅在 Firefox 上测试过，但我真的看不出它在其他浏览器上不起作用的原因（如果我错了，请告诉我）。好吧，除了 + 选择器，但它也在你的原始 CSS 中。

【讨论】：

+1，我觉得不错。请注意，您有与我相同的“交换图像”情况（检查我的答案）。
谢谢你！它极大地帮助了我对列表结构的看法。我投票给你的答案，但是我会接受@sandeep的答案，因为我正在使用那个:)
@The Hun：谢谢，很高兴为您提供帮助。而且不管你接受哪一个都没关系，这三种解决方案都是好的。
我回滚并添加了一个示例，该示例不涉及您的公司、图像或任何内容。请不要删除它，它可能对未来的搜索者有用。
感谢您的更改，这是我的错误。下次我会多注意的:)