javascript - 如何将 DIV 上的填充底部转换为其包含的 DIV 上的负边距？

Question

所以我想要一个 DIV 的 (splashSquareTitle) 填充底部转换成它包含 DIV 的 (splashSquare) 负边距顶部，我不确定但百分比是否会造成问题？非常感谢任何帮助。

我并不是要让 DIV 的 (splashSquareTitle) 填充底部换出到另一个 DIV 的 (splashSquare) 边缘顶部，我希望它模拟 DIV 的 (splashSquareTitle) 填充底部。

HTML

<div class="splashSquare">
  <div class="splashSquareTitle greenBG">
    <img src="img/placeholder/beach_icon.svg" alt="icon small" />
    <h5>Playground</h5>
  </div>
  <img src="img/placeholder/splash_square_placeholder.jpg" class="splashSquareImage" alt="splash square image" />
  <div class="splashSquareInfo">
    <h5>TiPai Playground</h5>
    <h5>Henderson, Auckland</h5>
  </div>
  <div class="splashSquareBuffer"></div>
</div>

CSS

.splashSquare{
  float:left;
  position:relative;
  width:50%;
  max-width:320px;
  color:#ffffff;
  border-bottom:1px solid #ffffff;
  -moz-box-shadow:inset 0px 1px #ffffff;
  -webkit-box-shadow:inset 0px 1px #ffffff;
  box-shadow:inset 0px 1px #ffffff;
}
.splashSquareTitle{
  float:left;
  width:100%;
  padding-bottom:16%;
}

JQUERY

$(function(){
  var splashheaderheight = $("div.splashSquareTitle").paddingBottom();
  var marginTop = parseInt(splashheaderheight) * -1;
  $("div.splashSquare").css("marginTop", marginTop + "px");
  $(window).resize(function() {
    var splashheaderheight = $("div.splashSquareTitle").paddingBottom();
    var marginTop = parseInt(splashheaderheight) * -1;
    $("div.splashSquare").css("marginTop", marginTop + "px");
  });
});

这是 jsfiddle

Answer 1

如果准确解释需求，请将 div.splashSquareTitle padding-bottom 的 (defined) css 属性应用到 (undefined) css div.splashSquare margin-top 的属性？

试试这个

$(document).ready(function() {
  (function($) {
    $.fn.getProp = function(prop) {
      var props = window.getComputedStyle (
        $(this).get(0)
      ).getPropertyValue(prop);
      return props
    };
})(jQuery);
  function translatePadding() {
    var splashheaderheight = $("div.splashSquareTitle").getProp("padding-bottom");
      return $("div.splashSquare").css("margin-top", "-"+splashheaderheight);
  };
  translatePadding();
  $(window).resize(function() {
    return translatePadding()
  });
});

jsfiddle http://jsfiddle.net/guest271314/f2tLS/

希望对你有帮助