馬賽克風格的圖像網格，浮動和邊距

我的主頁是一系列小圖像（用於導航）排列，以創建一個完美的矩形。馬賽克風格的圖像網格，浮動和邊距

我的計劃最初是使用<ul>和float和margin的一些創造性用途，但我不確定這是否是最佳選擇。

我能達到這種效果的最簡單方法是什麼？

<div class="home-nav"> 
    <ul> 
     <li><a href="#">blog</a></li> 
     <li><a href="#">contact</a></li> 
     <li><a href="#">about</a></li> 
     <li><a href="#">weddings</a></li> 
     <li><a href="#">portraits</a></li> 
     <li><a href="#">contact</a></li> 
    </ul> 
</div><!-- end home-nav -->

Image mosaic

來源

2013-07-16 AMC

您可以使用JavaScript插件像Masonry，Isotope，或者簡單但有效的Wookmark jQuery Plugin（我個人最喜歡的）。然而，對於這樣一個簡單的佈局，它可能不值得的開銷。

我認爲你在正確的軌道上使用float:left。但是，爲了在不使用JavaScript的情況下達到所需效果，您需要將左上方的兩個框分組。

此外，由於這是不是一個真正的列表，我會使用HTML5 <nav>標籤，而不是<ul>和<li>。點擊here查看下面的代碼的工作示例）。

HTML

<nav> 
    <div> 
    <a href="#"></a> 
    <a href="#"></a> 
    </div> 
    <div> 
    <a href="#"></a> 
    <a href="#"></a> 
    <a href="#"></a> 
    <a href="#"></a> 
    </div> 
</nav>

CSS

nav { 
    width: 315px; 
} 
nav a { 
    float: left; 
    background-color: gray; 
} 
nav div:nth-child(1) { 
    float: left; 
    width: 100px; 
} 
nav div:nth-child(1) a:nth-child(1) { 
    width: 100px; 
    height: 50px; 
    margin: 0 5px 5px 0; 
} 
nav div:nth-child(1) a:nth-child(2) { 
    width: 100px; 
    height: 50px; 
    margin: 0 5px 0 0; 
} 
nav div:nth-child(2) a:nth-child(1) { 
    width: 50px; 
    height: 105px; 
    margin: 0 5px 0 5px; 
} 
nav div:nth-child(2) a:nth-child(2) { 
    width: 155px; 
    height: 105px; 
} 
nav div:nth-child(2) a:nth-child(3) { 
    width: 155px; 
    height: 105px; 
    margin: 5px 5px 0 0; 
} 
nav div:nth-child(2) a:nth-child(4) { 
    width: 155px; 
    height: 105px; 
    margin: 5px 0 0 0; 
}

我傾向於在更復雜的CSS的代價，這就是爲什麼我使用:nth-child廣泛更喜歡最小的HTML標記，但是您可以使用類名實現相同的效果。

來源

2013-07-16 03:19:57

這是我尋找的智能，簡單的解決方案，謝謝。 – AMC

很高興它是有用的！ –

這種類型的佈置與裝箱算法自動完成。有跡象表明，這樣做有幾個JavaScript庫，最流行的是Isotope

來源

2013-07-16 03:19:19

如果你不需要自動安排，你也可以使用@ David的建議。 – 2013-07-16 03:22:28

馬賽克風格的圖像網格，浮動和邊距

回答

相關問題