时间戳

首页 > 解决方案 > 设计 DIV 以缩小垂直间隙

jquery - 设计 DIV 以缩小垂直间隙

问题描述

我需要一个解决方案来使用 css 或 jquery（如果适用）删除 DIV 之间的垂直空间。

当前应用于 div 的 css 没有顶部或底部填充或边距。但是内容更多的 div 会在相邻的 div 中产生不希望的间隙。下图说明了我的意思： 在此处输入图像描述

框 2在框 1 和框 3 之后产生间隙。

我正在尝试找到一个好的解决方案，将框 4 和框 6 移入这些间隙。

提前感谢您的任何帮助。

更新：

抱歉不包括标记和样式代码。我没有这样做，因为它是一个非常复杂的网站的一部分。下面我添加了 6 个标记中的第一个，即Box 1。只需再重复 5 次。它下面的样式代码是我能做到的最好的，而不会被数百行代码压倒。

<div class="grid-container campaign-board">

    <div class="grid-x grid-margin-x">
        <div class="views-row cell small-6 medium-4">
            <div data-history-node-id="1241" role="article" class="contextual-region node node--type-campaign-board node--promoted node--view-mode-teaser campaign-board__item" about="/node/1241">
            <div class="campaign-board__title">
                <span class="field field--name-title field--type-string field--label-hidden">Box 1</span>
            </div>
            <div class="campaign-board__company"></div>
            <div class="campaign-board__name">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
            </div>
            </span>
        </div>
    </div>
.
.
.
</div>


.campaign-board{
    padding-bottom: $global-padding * 3;
  }
    div.grid-x.grid-margin-x{
      border: 1px solid green;
    }
    div.views-row{
      border: 1px solid red;
    }
    .campaign-board__item{
      margin-bottom: $global-margin;
    }
      .campaign-board__title{
        color: get-color(june);
        font-size: rem-calc(16);
      }
      .campaign-board__company,
      .campaign-board__name{
       font-size: rem-calc(14);
       font-weight: 500;
       color: get-color(december);
      }

标签： jqueryhtmlcssstyling

解决方案

* {
  margin: 0; 
  padding: 0;
}

.wrapper {
  display: flex;
}

.row {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
}

.col {
  border: 1px solid red;
  padding: 20px 15px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="wrapper">
  <div class="row">
    <div class="col">
      Lorem Ipsum is simply dummy text 
    </div>
    <div class="col">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    </div>
  </div>
  
  <div class="row">
    <div class="col">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    </div>
    <div class="col">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    </div>
  </div>
  
  <div class="row">
    <div class="col">
      Lorem Ipsum is simply dummy text of the printing
    </div>
    <div class="col">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    </div>
  </div>
</div>
</body>
</html>

我希望它会有所帮助。

参考以下链接

推荐阅读