我又遇到了麻烦。再一次,这可能是新手可以绕过的,但我不能。
基本上,我想做的是:
- 获取
red
div下的green
div - 让最底部的 div 随之上升
- 在每个 div 之间有一个
4px
的边框
基于 this fiddle 的示例会很好。
最佳答案
您可以使用对象属性定义对象的位置。
例如:“absolute
”和“relative
”https://www.w3schools.com/css/css_positioning.asp
.red {
height: 200px;
width: 150px;
background-color: red;
border: solid white 4px;
position: relative;
}
.green {
height: 60px;
width: 150px;
background-color: green;
border: solid white 4px;
margin-top: 102px;
}
.verypurple {
height: 60px;
width: 200px;
background-color: darkviolet;
border: solid white 4px;
}
.yellow{
height: 60px;
width: 150px;
background-color: yellow;
border: solid white 4px;
position: absolute;
margin-left: 154px;
}
.purple{
height: 130px;
width: 150px;
background-color: purple;
border: solid white 4px;
position: absolute;
margin-left: 154px;
margin-top: 40px;
}
.blue{
height: 130px;
width: 150px;
background-color: blue;
border: solid white 4px;
position: absolute;
margin-left: 154px;
margin-top: 174px;
}
.darkbrownish{
height: 60px;
width: 70px;
background-color: gray;
border: solid white 4px;
position: absolute;
margin-left: 204px;
margin-top: 378px;
}
<html>
<head></head>
<body>
<div class="yellow">
yellow
</div>
<div class="purple">
purple
</div>
<div class="blue">
blue
</div>
<div class="darkbrownish">
dark<br>
brownish
</div>
<div class="red">
red
</div>
<div class="green">
green
</div>
<div class="verypurple">
very purple
</div>
</body>
</html>
关于html - 强制div在自己旁边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48622903/