gpt4 book ai didi

html - 如何使包装器 div 正确地将 div 包装在其中?

转载 作者:行者123 更新时间:2023-11-27 23:59:59 25 4
gpt4 key购买 nike

看,这是我的 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?请注意,直接定义 wrapper 的大小(高度/宽度)是不可取的,因为稍后内部 div 的大小可能会被修改

最佳答案

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

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

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

关于html - 如何使包装器 div 正确地将 div 包装在其中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21797877/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com