级联图像没有它们之间的空间答案

【问题标题】：Cascade image without space between them级联图像没有它们之间的空间
【发布时间】：2016-04-05 01:52:59
【问题描述】：

已经添加了四个图像，需要将它们级联在一起，但是不能，因为它们之间会产生空间。它只连接下面的图像但不能交叉，我添加了一个图像来显示我想要的结果

html

<div class="content-box-left-bootomgrids">
    <div class="content-box-left-bootomgrid">

        <img src="images/room2.jpg" title="image-name" />
        <img src="images/Ocean.jpg" title="image-name" />
    </div>

    <div class="content-box-left-bootomgrid">
        <h3>Welcome</h3>
        <p><img src="images/room3.jpg" title="image-name" />
        <img src="images/garden.jpg" title="image-name" /></p>
    </div>

    <div class="content-box-left-bootomgrid lastgrid">
        <img src="images/room3.jpg" title="image-name" />
        <img src="images/exec.jpg" title="image-name" />
    </div>
</div>

CSS

.content-box-left-bootomgrids {
    padding: 0em 0 0em 0;
}

.content-box-left-bootomgrid img{
    background:#FFF;
    padding:0px;
    display:block;
    width: 93%;
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}

我需要的预期结果 Result image i need

【问题讨论】：

标签： html css image class

【解决方案1】：

尝试使用这种 CSS/HTML 组合。我写的是作为一个初学者可以理解的。您需要了解更多关于不同 CSS 属性的信息。

.content-box-left-bootomgrids {
  width: 300px;
  text-align: center;
}
.content-box-left-bootomgrid img {
  width: 50%;
  margin: 0;
  float: left;
}

<div class="content-box-left-bootomgrids">
  <div class="content-box-left-bootomgrid">
    <h3>Welcome</h3>
  </div>
  <div class="content-box-left-bootomgrid">
    <img src="images/room3.jpg" title="image-name" />
    <img src="images/garden.jpg" title="image-name" />
  </div>
  <div class="content-box-left-bootomgrid">
    <img src="images/room2.jpg" title="image-name" />
    <img src="images/Ocean.jpg" title="image-name" />
  </div>
  <div class="content-box-left-bootomgrid lastgrid">
    <img src="images/room3.jpg" title="image-name" />
    <img src="images/exec.jpg" title="image-name" />
  </div>
</div>

【讨论】：