CSS:抑制子元素的负边距

CSS: Suppressing negative margins of child elements

本文关键字：元素 CSS      更新时间：2023-09-26

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

一个问题是子元素的边距设置为负，这会导致子元素显示在父元素之外(也会导致父元素的大小不符合要求)。

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

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

您是否尝试将类放到父类中，如:

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

要使父元素具有所需的高度，您还需要设置一些css:

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

有一个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显式地完成时才应该这样做。

相关文章：