如何正确放置图像瓷砖，而不使用只有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>