强制div在自己旁边

Question

我又遇到了一个并发症。再一次，这可能是新手可以绕过的，但我不能。

基本上，我想做的是：

获取greendiv下的reddiv
让最底层的 div 一起上去
在每个 div

4px

基于 this fiddle 的示例会很好。

Answer 1

您可以使用 Masonry 进行布局。

.masonry { /* Masonry container */
  column-count: 2;
  column-gap: 4px;
}

.item { /* Masonry bricks or child elements */
  display: inline-block;
  margin: 0 0 4px;
  width: 100%;
}

See here了解更多详情。

Answer 2

在绿色的 div 中添加 margin-top 为 :

margin-top:-84px

因为我已经在您的 fiddle 上进行了试验并且它正在运行

Answer 3

您可以使用对象属性定义对象的位置。例如：“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>

强制div在自己旁边

Forcing divs next to themselves

html

css

fiddle