Question

我在另一个<div>内有几个<div>，它们恰到好处，但我想添加一个边框来区分它们。但是，当我添加边框或轮廓时，它会显示div的外部。有没有办法得到它，以便边框将在div的边缘内？

示例：http://jsfiddle.net/5cSke/11/

我希望内部<div>都保留在外部div中，并且边框不要扩展并覆盖内部<div>之外的任何内容。

编辑（部分解决方案）：我能够通过将包含div的溢出设置为隐藏来找到部分解决方案，从而防止边框扩散到外部<div>之外，但不是来自<div>内的{{1}}之间的传播。

Answer 1

这就是box model的工作方式。有一种CSS3 box-sizing: border-box风格可以让你做你想做的事。

更新小提琴：http://jsfiddle.net/5cSke/14/

Answer 2

你可以在彼此之间制作几个div，只为每个使用指定样式 div id或class

<style>
    div {
    border : 2px solid red;
    }

    div #test2 {
    border : 1px solid black;
    }
</style>

<div id="test1">
main div
    <div id="test2">inner div</div>
 <br>
</div>

了解更多信息

Nested DIV elements

Answer 3

我认为没有办法防止边界出现在你的div外面。我建议你在你的div上设置背景颜色，以便区分它们。

Answer 4

可能有一个新的css 3属性来做这样的事情。但是有一个更优雅的解决方案。给每个div一个不透明度的rgba值。重叠（或）嵌套的div将具有比其父级更暗的背景。

Working Example

将<div>的边框放在另一个<div> </div> </div>中

4 个答案: