一個列表，左側簡單浮動，不同單元大小

我對你有一個很好的挑戰。在這裏，你有下一個代碼（活生生的例子：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

一個列表，左側簡單浮動，不同單元大小

回答

相關問題