Question

添加了四张图片并需要将它们级联在一起，但不能，导致它们之间产生空间。只连接下面的图像但是不能连接，我添加了一张图像来显示我之后的结果

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

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

级联图像，它们之间没有空间

1 个答案: