如何将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

如果准确地解释要求，应用（定义） css的属性div.splashSquareTitle padding-bottom至（未定义） 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/

希望这可以帮助