如何正確放置圖像瓷磚，而不使用只有CSS的間隙或行間隙？

Question

我是新來的HTML和CSS。對於我的一個項目，我需要在網頁上將16張圖像放入4x4的網格中。這些瓷磚之間不能有間隙，他們需要拉伸以將瀏覽器從一邊延伸到另一邊。他們也應該只能垂直滾動。我們只允許使用JavaScript或JQuery，因此我只能使用HTML和CSS。

我寫了4個div元素，每個代表一行;在每個div裏面，一個span元素包含4個圖像 - 這就是我製作4x4網格的方式。一個代碼片段看起來是這樣的：

/* One row in a div*/ 
<div class="map"> 
    <span> 
     <img src="map_images/1.png"> 
     <img src="map_images/2.png"> 
     <img src="map_images/3.png"> 
     <img src="map_images/4.png"> 
    </span> 
</div> 

我也寫了一個導航欄應漂浮在背景圖像右上角是：

/* 4 div elements of 4 rows before this code*/ 
<div id="nav"> 
    <div><a href="foo.html">Foo</a></div> 
    <div><a href="boo.html">Boo</a></div> 
</div> 

上面的代碼，我的樣式表看起來像這樣：

.map{ 
    margin:0; 
    padding:0; 
} 

#nav { 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 10; 
} 

但是，在這一點上我遇到了幾個問題。

首先，我仍然有所有16個圖像之間的列間隙和行間隙。無論我將地圖邊距和填充設置爲什麼值，都不會改變。我甚至嘗試過負面的價值觀，仍然沒有改變。有人能告訴我如何解決這個問題，消除所有的差距？

其次，我Google搜索瞭解到z-index可以用來使div浮動到背景之上;然而，這裏沒有工作，似乎div #nav停留在右上角作爲一個單獨的div，佔用空間，而不是浮動上面。對此有何建議？

Answer 1

我所要做的就是設置上的圖像float: left和width: 25%在CSS

.map img{ 
    float: left; 
    width: 25%; 
} 

DEMO

Answer 2

我認爲你正在尋找這樣的事情？見小提琴http://jsfiddle.net/DIRTY_SMITH/q12bh4se/4/

段：左

body { 
 

 
     margin: 0px; 
 

 
    } 
 

 
    div { 
 

 
     width: 50%; 
 

 
     float: left; 
 

 
    } 
 

 
    img { 
 

 
     width: 50%; 
 

 
     float: left; 
 

 
    } 
 

 
    .top-left { 
 

 
     z-index: 9999; 
 

 
     position: absolute; 
 

 
     top: 0; 
 

 
     left: 0; 
 

 
     color: white; 
 

 
    } 
 

 
    .top-right { 
 

 
     z-index: 9999; 
 

 
     position: absolute; 
 

 
     top: 0; 
 

 
     right: 0; 
 

 
     color: white; 
 

 
    }

<h1 class="top-left">Top Left</h1> 
 
<h1 class="top-right">Top Right</h1> 
 
<div class="row-1-col-1"> 
 
    <img src="http://lorempixel.com/g/200/200/"> 
 
    <img src="http://lorempixel.com/200/200/sports/"> 
 
    <img src="http://lorempixel.com/200/200/sports/1/"> 
 
    <img src="http://lorempixel.com/200/200/sports/Dummy-Text/"> 
 
</div> 
 
<div class="row-1-col-2"> 
 
    <img src="http://lorempixel.com/g/200/200/"> 
 
    <img src="http://lorempixel.com/200/200/sports/"> 
 
    <img src="http://lorempixel.com/200/200/sports/1/"> 
 
    <img src="http://lorempixel.com/200/200/sports/Dummy-Text/"> 
 
</div> 
 
<div class="row-2-col-3"> 
 
    <img src="http://lorempixel.com/g/200/200/"> 
 
    <img src="http://lorempixel.com/200/200/sports/"> 
 
    <img src="http://lorempixel.com/200/200/sports/1/"> 
 
    <img src="http://lorempixel.com/200/200/sports/Dummy-Text/"> 
 
</div> 
 
<div class="row-3-col-3"> 
 
    <img src="http://lorempixel.com/g/200/200/"> 
 
    <img src="http://lorempixel.com/200/200/sports/"> 
 
    <img src="http://lorempixel.com/200/200/sports/1/"> 
 
    <img src="http://lorempixel.com/200/200/sports/Dummy-Text/"> 
 
</div>

Answer 3

浮動和寬度設置爲25％。另外我會在下面展示如何使用:hover pseudo-class創建一個浮動菜單。

.map div img { 
 
    width: 25%; 
 
    float:left; 
 
    display: inline-block; 
 
} 
 

 
#nav { 
 
    width: 50px; 
 
    background-color: grey; 
 
} 
 

 
#nav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 50px; 
 
    background-color: grey; 
 
    position: absolute; 
 
    display:none; 
 
} 
 

 
#nav:hover ul, #nav ul:hover { 
 
    display:block; 
 
}

<div id="nav"> 
 
    Menu 
 
    <ul> 
 
    <li><a href="foo.html">Foo</a></li> 
 
    <li><a href="boo.html">Boo</a></li> 
 
    </ul> 
 
</div> 
 
<div class="map"> 
 
    <div class="row"> 
 
    <img src="http://lorempixel.com/100/100/"> 
 
    <img src="http://lorempixel.com/100/100/"> 
 
    <img src="http://lorempixel.com/100/100/"> 
 
    <img src="http://lorempixel.com/100/100/"> 
 
    </div> 
 
    <div class="row"> 
 
    <img src="http://lorempixel.com/100/100/"> 
 
    <img src="http://lorempixel.com/100/100/"> 
 
    <img src="http://lorempixel.com/100/100/"> 
 
    <img src="http://lorempixel.com/100/100/"> 
 
    </div> 
 
    <div class="row"> 
 
    <img src="http://lorempixel.com/100/100/"> 
 
    <img src="http://lorempixel.com/100/100/"> 
 
    <img src="http://lorempixel.com/100/100/"> 
 
    <img src="http://lorempixel.com/100/100/"> 
 
    </div> 
 
    <div class="row"> 
 
    <img src="http://lorempixel.com/100/100/"> 
 
    <img src="http://lorempixel.com/100/100/"> 
 
    <img src="http://lorempixel.com/100/100/"> 
 
    <img src="http://lorempixel.com/100/100/"> 
 
    </div> 
 
</div>