Question

我正在使用插件来制作相同的div，例如：matchheight jquery plugin我做了我想要的几乎，正如你在我的演示中看到的那样我的两个div是相同的但是我想做一点具体的事情：

我的.b div必须比.a div短，例如-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

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

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

Answer 2

除非重写脚本，否则您可能会在使用border和background-clip的CSS中伪造此内容：

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也可能会有所帮助。

如何在我的插件中添加减去px？

3 个答案: