CSS：抑制子元素的负边距

问题描述：

我有一个围绕某些动态内容的父元素（例如div）。我希望父div在尽可能多的情况下完全包含子元素。CSS：抑制子元素的负边距

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

所以

是否有可能以抑制子元素的切缘阴性被应用到父（例如，而不必修改对孩子的方式）的任何CSS技巧。
失败的是，有无论如何检测通过JavaScript是否一个特定的元素有溢出内容？（？在哪个方向和内容满溢什么程度）

答

你尝试把一个班的家长，如：

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

要让父母与所需的高度，你也需要设置一些css：

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

谢谢，我没有试过 - 我会给它一个回去找回你。 – UpTheCreek

但是，一个问题是，我并不是真的想要影响孩子元素的积极利润率。但我会看看我是否可以用这个做点什么。 – UpTheCreek

答

有一个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。

感谢亚当 - 有趣的方法。我宁愿使用CSS，但我有一种感觉，我不能用CSS单独完成它，所以沿着这些线可能是必要的。 – UpTheCreek

哦，还有一个简单的说明，这是使用prototype.js。 –

CSS：抑制子元素的负边距

相关推荐