CSS:抑制子元素的负边距

时间:2011-09-25 20:11:34

标签: javascript css

我有一个包含某些动态内容的父元素(例如div)。我希望父div在尽可能多的情况下完全包含子元素。

一个问题是具有负边距设置的子元素,这会导致子元素显示在父元素之外(并且还导致父元素不具有所需的大小)。

所以

  1. 是否有任何css技巧可以应用于父元素以抑制子元素中的负边距(例如,无需修改子元素的样式)。

  2. 如果失败了,无论如何通过javascript检测特定元素是否有溢出的内容? (以及内容溢出的方向和程度?)

2 个答案:

答案 0 :(得分:1)

您是否尝试将课程设置为父课程,如:

.parentDiv > * {
  margin:0 !important;
}

要让父级具有所需的高度,您还需要设置一些css:

.parentDiv{
    overflow:hidden;
    position:relative;
    background:#DFE;
    padding:5px;
 }

答案 1 :(得分:1)

有一种处理这种方法的javascript方法,但它肯定不像@Mic的CSS解决方案那么干净。我还没有完全测试过这个,你可能需要为各种填充/边距调整添加一些支持,但是如果JS解决方案是唯一的选择,那么它会启动。使用prototype.js(jquery会类似,但普通的javascript会非常有弹性):

function checkOverflow (child) {
  child = $(child);
  if (child.descendants().any()) {
    child.getElementsBySelector("> *").each(function(e) {
      checkOverflow(e);
    });
  }

  var parent = child.up();

  var child_left = child.cumulativeOffset()['left'], child_top = child.cumulativeOffset()['top'];
  var child_height = child.getDimensions()['height'], child_width = child.getDimensions()['width'];

  var parent_left = parent.cumulativeOffset()['left'], parent_top = parent.cumulativeOffset()['top'];
  var parent_height = parent.getDimensions()['height'], parent_width = parent.getDimensions()['width'];

  if (child_top < parent_top) {
    if (child_left < parent_left) {
      // adjust element style here
    } else if (child_left > parent_left + parent_width) {
      // adjust element style here
    }
  } else if (child_top > parent_top + parent_height) {
    if (child_left < parent_left) {
      // adjust element style here
    } else if (child_left > parent_left + parent_width) {
      // adjust element style here
    }
  }
}

但是,我的一般感觉是,如果无法通过CSS明确地完成此操作,您应该这样做。