一个列表，左侧简单浮动，不同单元大小

我对你有一个很好的挑战。在这里，你有下一个代码（活生生的例子：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）
简单的浮动：左为李的（OK）
将细胞对准下一张照片（尚未完成）

enter image description here

提示：

当你看到第二个。小类具有相对位置
你不需要你需要做一些其他的第二个小一个
什么特别的东西东西
所以你然后需要推回项目回到它的正确位置
然后你需要修复它留下的空白空间

来源

2011-03-25 Grávuj Miklós Henrich

你应该替换'img/squares.png'等。来自http://dummyimage.com/的图片。 – thirtydot 2011-03-25 11:02:28

现场示例：http://inturnets.com/test/test.html – 2011-03-25 11:04:57

@hun我从我的身边尝试可能是我们帮助您：

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

来源

2011-03-25 11:29:55 sandeep

非常感谢！ :) – 2011-03-25 12:14:25

肯定是最简单的解决方案。当我尝试这个时，那个鬼鬼祟祟的'清楚：左'把我搞砸了，没有注意到它。 – thirtydot 2011-03-25 12:17:02

感谢hun＆thirtydot – sandeep 2011-03-25 12:36:07

我不知道如何使用花车做到这一点。

下面是使用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。

来源

2011-03-25 11:51:52 thirtydot

+1似乎是另一个很好的解决方案。我认为'交换图像'的东西不是一个真正的问题，看着原来的HTML（我们都这样做）。我认为这个问题中包含的图像可以被看作是一个例证。如果OP交换HTML中的图像，它们将以您的和我的解决方案都以正确的方式出现。 – kapa 2011-03-25 12:06:16

感谢您的努力人！我将使用的代码来自@sandeep。图像的正确性，只是为了回应你早先的信息。非常有趣的解决方案也是你的。我会一直铭记在心。投了起来;） – 2011-03-25 12:13:34

我已创建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。

来源

2011-03-25 11:55:30 kapa

+1，看起来不错。请注意，你有和我一样的“交换图像”情况（查看我的答案）。 – thirtydot 2011-03-25 12:00:18

谢谢你！它帮助了我很多关于列表结构的想法。我投了你的答案，但是我会接受@sandeep的答案，因为我使用那个:) – 2011-03-25 12:12:05

@The Hun：谢谢，很高兴帮助。无论你接受哪种方式都是好的，这三种解决方案都很好。 – kapa 2011-03-25 12:21:14

一个列表，左侧简单浮动，不同单元大小

回答

相关问题