看，这是我的 html 和 css.
html:
<头><title>无标题文档</title><link type="text/css" rel="stylesheet" href="stylesheets2.css"/><身体><div id="包装器"><div id="cont1"></div><div id="cont2"></div>CSS:
<代码>*{边界:无；}#包装器{显示:内联块；背景颜色:浅青色；位置:绝对；顶部:200px；左:300像素；背景颜色:浅黄色；边框:1px 纯绿色；}#cont1{位置:绝对；宽度:100px；高度:50px；背景颜色:红色；}#cont2{位置:绝对；宽度:50px；高度:100px；背景颜色:红色；}1.如何让包装器 div 包裹这些矩形，使其具有 100x100 大小?请注意，直接定义包装器的大小(高度/宽度)是不可取的，因为以后可能会修改内部 div 的大小
这将解决问题，但我必须将内部元素的位置设置为:relative.
<代码>*{边界:无；}#包装器{显示:内联块；背景色:#ccc;位置:绝对；顶部:200px；左:300像素；边框:1px 纯绿色；}#cont1{位置:相对；宽度:100px；高度:50px；背景颜色:红色；}#cont2{位置:相对；宽度:50px；高度:100px；边距顶部:-50px;背景颜色:红色；}小提琴:http://jsfiddle.net/9TZZ9/
编辑>有关问题的更多信息-> 绝对与相对位置宽度&高度
look, here are my html and 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. How to make the wrapper div wrap these rectangles so it would have 100x100 size? note that it's undesirable to define the size of wrapper directly (height/width) because later sizes of inner divs may be modified
This will fix problem, but i had to set position of inner elements to: 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;
}
Fiddle: http://jsfiddle.net/9TZZ9/
Edit> more about problem -> absolute vs relative position width & height
这篇关于我如何使包装器 div 正确地将 div 包裹在其中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
