0

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

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

  • 获取greendiv下的reddiv
  • 让最底层的 div 跟上去
  • 4px每个 div 之间都有一个边界

基于这个小提琴的一个例子会很好。

4

3 回答 3

1

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

于 2018-02-05T13:12:18.127 回答
0

您可以使用 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%;
}

有关更多详细信息，请参见此处。

于 2018-02-05T12:52:43.133 回答
-1

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

margin-top:-84px

正如我在你的小提琴上做过的那样，它正在工作

于 2018-02-05T13:11:26.530 回答