如何正确地放置图像瓦片，没有列间隙或行间隙之间只使用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张图像之间仍然有列间距和行间距。无论我将地图边距和内边距设置为什么值，都不会改变。我甚至试过负值，还是没有改变。有人能告诉我如何解决这个问题，消除所有的差距吗?

其次，我谷歌了一下，了解到z-index可以用来使div浮动在背景之上;然而，这在这里不起作用，div #nav似乎停留在右上角作为一个单独的div占用空间，而不是浮动在上面。对此有什么建议吗?

Answer 1

左浮动，设置宽度为25%。我还将在下面展示如何使用:hover伪类创建浮动菜单。

.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>

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

我所要做的就是在CSS

的图片上设置float: left和width: 25%

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