Question

我正在尝试在两个图像之间创建空间，但它们都使用相同的div名称。是否有可能在彼此之间留出空间？

HTML：

<div class="section">
    <div class="container">
        <div class="skillsection">
        <h1> Title</h1>
        </div>
        <div class="row">
            <div class="col-5"> 
            <div class="image-container">
              <img src="Images/back6.jpg" alt="my image" class="img-about">
            </div>
            </div>
            <div class="col-5">
            <div class="image-container">
              <img src="Images/back6.jpg" alt="my image" class="img-about">
            </div>
            </div>
            <div class="col-2">
                <br><br><br><br><br><br><br><br><br><br>
                <h3> &larr; &nbsp; here </h3>
                <br>
                <h1><span class="five">My</span> <span class="four">Work</span></h1>
            </div>
        </div>
    </div>
</div>

我试过了：

.image-container img{
    padding-left: 20px;
}

.image-container + .image-container{
    padding-left: 20px;
}

但似乎无法在彼此之间创造空间

Answer 1

你可以这样做：

.image-container:first-of-type {
  padding-right: 20px;
}

这只会影响第一个和容器，而不影响图像......

Answer 2

也许这就是你想要完成的事情。

.image-container {
  border: 1px solid gray; /**This is not necessary I just added it for fun*/
}

img {
  width: 100%;
  max-width: 100%;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>



<div class="section">
  <div class="container">
    <div class="skillsection">
      <h1> Title</h1>
    </div>
    <div class="row">
      <div class="col-5">
        <div class="image-container">
          <img src="https://www.visitmexico.com/sites/default/files/field/image/2017/03/puebla_destinos-principales_puebla_int_2.jpg" alt="my image" class="img-about">
        </div>
      </div>
      <div class="col-5">
        <div class="image-container">
          <img src="https://www.visitmexico.com/sites/default/files/field/image/2017/03/puebla_destinos-principales_puebla_int_2.jpg" alt="my image" class="img-about">
        </div>
      </div>
      <div class="col-2">
        <br><br><br><br><br><br><br><br><br><br>
        <h3> &larr; &nbsp; here </h3>
        <br>
        <h1><span class="five">My</span> <span class="four">Work</span></h1>
      </div>
    </div>
  </div>
</div>

您实际上不需要在两个图像之间添加空格。如果你使用twitter bootstrap，那里已经添加了一个空间。这是阴沟空间。正如您所看到的，我所做的就是确保图像仅使用其父级宽度的100％，即.image-container。 frameowrk将处理其余的事情。

另请参阅文档的这一部分：Boostrap Grid System

在两个图像之间填充

2 个答案: