Question

我正在尝试使3个div连续一行。 Divs分为两个部分，一个部分包含图像，另一部分包含3行文本。

div具有盒阴影样式。

当我完成所有这些操作时，div之间没有间距，当我添加额外的边距或填充时，在调整页面大小时会出现问题。

这是我最想做的事情，唯一的问题是当我调整浏览器div的大小与自身碰撞时。

当我尝试使用像断点col-sm-6-md-4这样的断点来使主要的3 div消失

我尝试了许多方法来做到这一点。这是其中之一。.不太好，因为使用额外的py-4填充，可能会出错。

我有一个工作版本，但结构不同，例如img在上方，文本在底部，然后是作品。

.box1 {
  box-shadow: 1px 1px 3px 1px grey;
}

<section>
  <div class="container">

    <div class="row">

      <div class="col-4 py-4">
        <div class="row">
          <div class="col ">
            <div class="row justify-content-center">
              <div class="col-11 box1 d-flex">
                <div class="box2"><img style="width: 100px; height: 100px;" src="img/icon/m/img.png" alt="a"></div>
                <div class="box2">
                  <p>text</p>
                  <p>text</p>
                  <p>text</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-4 py-4">
        <div class="row">
          <div class="col ">
            <div class="row justify-content-center">
              <div class="col-11 box1 d-flex">
                <div class="box2"><img style="width: 100px; height: 100px;" src="img/icon/m/img.png" alt="a"></div>
                <div class="box2">
                  <p>text</p>
                  <p>text</p>
                  <p>text</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-4 py-4">
        <div class="row">
          <div class="col ">
            <div class="row justify-content-center">
              <div class="col-11 box1 d-flex">
                <div class="box2"><img style="width: 100px; height: 100px;" src="img/icon/m/img.png" alt="a"></div>
                <div class="box2">
                  <p>text</p>
                  <p>text</p>
                  <p>text</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


    </div>
  </div>
</section>



<---- below is working code but with other layout what i dont wont -->


  <---- below is working code but with other layout what i dont wont -->



    <div class="container">
      <div class="row">

        <div class="col-sm-4">
          <div class="box1">
            <img class="" src="img/icon/m/img.png" alt="a">
            <p>text</p>
            <p>text</p>
            <p>text</p>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="box1">
            <img class="" src="img/icon/m/img.png" alt="a">
            <p>text</p>
            <p>text</p>
            <p>text</p>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="box1">
            <img class="" src="img/icon/m/img.png" alt="a">
            <p>text</p>
            <p>text</p>
            <p>text</p>
          </div>
        </div>
      </div>
    </div>

Answer 1

您是否尝试过执行基于百分比的边距和宽度？

但是，如果您使用的是引导程序，则各列之间应自动具有填充。

类似-

.col-sm-4 {
    width: 30%
    margin: 1.66666667%;
}

也许我误解了您要做什么。

有没有办法在带阴影的div之间留出间距？

1 个答案: