Question

我的网站中有一个部分应该一直延伸到屏幕上。

我想在此部分添加4个图像，一个在另一个旁边，并使它们响应。我希望他们填补背景，并根据需要在他们之间打破。我应该如何修改下面的代码来完成我想要的效果？

 #games {
    background-color: #000;
}

#games img {
  width: 100%;
  height: auto;
}

.4columns {
  width: 32%;
  display: inline-block;
}

<section id="games" class="section section-games">
      <div class="container-fluid">
        <div class="row">
          <a href="" target="_blank"><img class="4columns" src="resources/media/icons/1.png"></a>
          <a href="" target="_blank"><img class="4columns" src="resources/media/icons/2.png"></a>
          <a href="" target="_blank"><img class="4columns" src="resources/media/icons/3.png"></a>
          <a href="" target="_blank"><img class="4columns" src="resources/media/icons/4.png"></a>
        </div>
      </div>
</section>

Answer 1

我想你想要这样的东西：

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

<div class="map">
    <span>
        <img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
        <img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
        <img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
        <img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
    </span>
</div>

Bootstrap图像gallary部分

1 个答案: