html - 如何使用 CSS 修复 3x3 图像 block

Question

我有一个 3x3 的图像 block 。

我希望图片的宽度为 400 像素，高度为 300 像素。

我还希望图像从屏幕的边缘延伸到屏幕的边缘，并且图像之间没有空间。

This is what it looks like at the moment

这是我当前的 CSS 和 HTML:

.clear {
  clear: both;
}

#grid {
  width: 100%;
}

.grid-element {
  width: 33.3333%;
  height: 200px;
  float: left;
}

<div id="grid">

  <div class="grid-element">
    <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
  </div>

  <div class="grid-element">
    <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
  </div>

  <div class="grid-element">
    <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
  </div>


  <div class="grid-element">
    <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
  </div>

  <div class="grid-element">
    <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
  </div>

  <div class="grid-element">
    <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
  </div>


  <div class="grid-element">
    <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
  </div>

  <div class="grid-element">
    <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
  </div>

  <div class="grid-element">
    <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
  </div>

</div>

<div class="clear">Example taken from <a href="https://gist.github.com/grandoch/1400971">grandoch</a>'s gist</div>

Answer 1

E.更新了与​​ Bootstrap 一起使用的答案。

Bootstrap 为所有 col-*-* 元素添加左右填充，因此您只需删除该填充即可。

对于全视口(viewport)宽度，您需要使用流体容器，即 container-fluid 类。

#grid .grid-element {
  height: 200px;
  padding-left: 0px;
  padding-right: 0px;
  overflow: hidden;
}
img {
  width: 100%;
  height: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div id="grid" class="row">
    <div class="col-xs-4 grid-element">
      <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
    </div>
    <div class="col-xs-4  grid-element">
      <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
    </div>
    <div class="col-xs-4  grid-element">
      <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
    </div>
    <div class="col-xs-4  grid-element">
      <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
    </div>
    <div class="col-xs-4  grid-element">
      <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
    </div>
    <div class="col-xs-4  grid-element">
      <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
    </div>
    <div class="col-xs-4  grid-element">
      <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
    </div>
    <div class="col-xs-4  grid-element">
      <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
    </div>
    <div class="col-xs-4  grid-element">
      <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
    </div>
  </div>
</div>