Question

我正在尝试使用许多相对定位的Div布局一行。它们都是具有不同高度的内联块元素。你可以在我的codepen中看到它：

如何避免Nr之间的空白区域。 1（红色）和Nr。 5（黑色）如果窗口变小并且DIVS在第二行重新排列？所以Nr。 5根直接在Nr.1下？

这可以用CSS吗？

感谢您的帮助！

HTML

<div class="drag" id="item_1">1</div>
<div class="drag" id="item_2">2</div>
<div class="drag" id="item_3">3</div>
<div class="drag" id="item_4">4</div>
<div class="drag" id="item_5">5</div>

CSS

.drag {
  position: relative;
  display: inline-block;
}

#item_1 {
  background-color: red;
  width: 300px;
  height: 300px;
}

#item_2 {
  background-color: blue;
  width: 300px;
  height: 400px;
}

#item_3 {
  background-color: green;
  width: 200px;
  height: 500px;
}

#item_4 {
  background-color: yellow;
  width: 300px;
  height: 300px;
}

#item_5 {
  background-color: black;
  width: 300px;
  height: 300px;
}

Answer 1

你必须把这个代码放入拖拽类

body
    {
    margin:0px;
    padding:0px;
    }
    .drag 
    {
        display: inline-block;
        float:left;
        padding:0px;
        margin:0px;
    }

将div互相浮动非常有用......

重新定位相对分区调整大小

1 个答案: