html - 强制div在自己旁边

标签 html css fiddle

我又遇到了麻烦。再一次,这可能是新手可以绕过的,但我不能。

基本上,我想做的是:

  • 获取red div下的green div
  • 让最底部的 div 随之上升
  • 在每个 div 之间有一个 4px 的边框

基于 this fiddle 的示例会很好。

最佳答案

您可以使用对象属性定义对象的位置。 例如:“absolute”和“relativehttps://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/

相关文章:

javascript - 加载动态数组中的最终图像后如何调用函数?

javascript - 无法获取 SVG 矩形计算样式

mysql - SQL Fiddle - 无法添加外键约束

c - 从 Ruby 访问 C 项目上的 dll 函数

mysql - 如何获取 DB Fiddle 的执行时间?

javascript - 如何停止播放器的点击?

html - 在 chrome 中填充,但在 firefox 或 ie 中填充

css - 在一列设计中垂直居中 div

html - 实现响应式字体大小的简单方法

html - 为什么我的图像在其他属性正常工作时没有调整大小?