Question

我对你有很好的挑战。这里有下一个代码（实例：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>

任务：

一个单一的清单（ok）
简单浮动：左边是LI（好）
将细胞对齐，如下图所示（尚未完成）

enter image description here

提示：

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

Answer 1

@hun i从我这边尝试可能对你有所帮助：

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

Answer 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。

Answer 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中。

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

3 个答案: