我如何使包装器 div 正确地将 div 包装在其中？答案

【问题标题】：How do i make wrapper div correctly wrap divs inside of it?我如何使包装器 div 正确地将 div 包装在其中？
【发布时间】：2014-03-14 21:46:21
【问题描述】：

看，这是我的 html 和 css。

html:

<!DOCTYPE html>
<head>
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="stylesheets2.css" />
</head>        
    <body>
        <div id="wrapper">
            <div id="cont1"></div>
            <div id="cont2"></div>
        </div>
    </body>
</html>

css:

*{
    border:none;
}
#wrapper{
    display:inline-block;
    background-color:lightcyan;
    position:absolute;
    top:200px;
    left:300px;
    background-color:lightyellow;
    border:1px solid green;
    }
#cont1{
    position:absolute;
    width:100px;
    height:50px;
    background-color:red;
}
#cont2{
    position:absolute;
    width:50px;
    height:100px;
    background-color:red;
}

1。如何使包装器 div 包装这些矩形，使其大小为 100x100？请注意，直接定义包装器的大小（高度/宽度）是不可取的，因为以后可能会修改内部 div 的大小

【问题讨论】：

你能解释一下你想要什么吗？如果您希望持有人 div 为 100x100 - jsfiddle.net/timspqr/9B5x6，则内部 div 必须重叠
感谢您的提问！可以让它们重叠，我只想使用最少数量的高度/宽度/位置定义。边框必须为 100x100，并且包装器的右下四分之一不应隐藏在 cont div 下。
好的，那么看起来@nevermind 有你的解决方案

标签： html css

【解决方案1】：

Fiddle

#wrapper{
 display:inline-block;
     position:absolute;
     top:200px;
     left:300px;
     background-color:lightyellow;
     border:1px solid green;
    }
#cont1{
    width:100px;
    height:50px;
    background-color:red;
}
#cont2{
    width:50px;
    height:100px;
    background-color:red;
}

【讨论】：

【解决方案2】：

这将解决问题，但我必须将内部元素的位置设置为：相对。

*{
    border:none;
}
#wrapper{
    display:inline-block;
    background-color:#ccc;
    position:absolute;
    top:200px;
    left:300px;

    border:1px solid green;
    }
#cont1{
    position:relative;
    width:100px;
    height:50px;
    background-color:red;
}
#cont2{
    position:relative;
    width:50px;
    height:100px;
    margin-top:-50px;
    background-color:red;
}

小提琴：http://jsfiddle.net/9TZZ9/

Edit> 更多关于问题的信息 -> absolute vs relative position width & height

【讨论】：