<分区>
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);
}
最佳答案
* {
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>希望对您有所帮助。
引用以下链接
关于jquery - 设计 DIV 以缩小垂直间隙，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58386392/