如何在我的插件中添加负 px?

Question

我正在使用一个插件来使我的div相等，例如：matchheight jquery插件，我几乎做了我想要的东西，正如你在我的演示中看到的那样，我的两个div是相等的，但我想说一点具体：

我的.bdiv 必须比.adiv 短一点，例如 -15px 或 -10px。我的问题是如何添加自定义 -px ？

$('.b').matchHeight({
target: $('.a')
});

.a,.b{
color:#fff;
padding:10px;
width:100px;
overflow:hidden;
float:left;
margin:5px;
}
.a{
background:red;
}
.b{
background:orange;
}

<div class="a">
Lorem ipsum dolor sit amet, consectetur adipisicing 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 class="b">
Lorem ipsum dolor sit amet, consectetur adipisicing 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
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>

Answer 1

在插件调整高度后，您可能需要调整"b"元素。因此，您需要在更新后的回调函数中执行此操作。

$.fn.matchHeight._afterUpdate = function(event, groups) {
$('.b').height(function(){ return $('.b').height() - 10; });
}

Answer 2

除非重写脚本，否则你可能会在CSS中使用border和background-clip伪造它：

border-bottom:solid 10px/* set you size here */ transparent /* lets see through it */;
background-clip:padding-box;/* keep background away from the border */

$('.b').matchHeight({
target: $('.a')
});

.a,
.b {
color: #fff;
padding: 10px;
width: 100px;
overflow: hidden;
float: left;
margin: 5px;
box-shadow:inset 0 0 0 3px black;
}
.a {
background: red;
}
.b {
background: orange;
border-bottom: solid 15px transparent;
background-clip: padding-box;
}
body {
background: gray
}

<div class="a">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
</div>
<div class="b">
Lorem ipsum dolor sit amet
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>

Answer 3

如果使用 jquery，可以使用 height 方法(或 css 方法(来获取和设置高度值，并使用纯 JavaScript 进行减去 10 或 15 px 的实际计算。 如果你想使用纯CSS和HTML，你也可以使用CSS中的calc功能，尽管一些浏览器不支持它。

在某些情况下(即，当试图使包括边框在内的高度相等时(，box-model：border-box也可能有所帮助。