Question

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

基本上，我正在尝试做的事情：

获取green div

red

让最底层的div上去吧
每个div之间都有4px的边框

基于this fiddle的示例会很好。

Answer 1

有对象属性，您可以使用它从对象定义位置。例如：＆＃34; absolute＆＃34;和＆＃34; relative＆＃34; https://www.w3schools.com/css/css_positioning.asp

＆＃13;

.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;
        }

＆＃13;

<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>

＆＃13;

Answer 2

You could use Masonry for your layout.

.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 for more details.

Answer 3

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

margin-top:-84px

因为我已经在你的小提琴上进行了实验并且它正在工作

迫使自己旁边的div

3 个答案: