Question

看，这是我的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的后续大小

Answer 1

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

*{
    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/

编辑＆gt;更多关于问题 - ＆gt; absolute vs relative position width & height

Answer 2

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;
}

如何让包装器div正确地将div包装在里面？

2 个答案: