HTML/CSS 向左浮动自动填充空白

Question

我创建了一个仪表板，它连接到 sql 以获取作业状态。每个作业集合都显示在一个设置为向左浮动的 Div 中。如果一切正常，如下所示：

当出现错误时，包含作业的 div 会自动展开以显示作业，然后看起来像：

我想知道是否有办法让其他 div 调整并移入空白区域？我猜这仅使用 HTML 和 CSS 是不可能的，所以如果有人知道任何可以轻松做到这一点的插件，我愿意使用 jquery！

谢谢！

Answer 1

您可以使用Masonry。 Masonry 是一个 JavaScript 网格布局库。

Answer 2

我认为float:left 正在创建自己的区块

你需要使用display property

这里有一个你需要的例子：

ul {display:table;}
ul li {display:table-cell;}

如果你想保持 div 属性为float:left;，那么你需要将position:absolute 提供给错误部分（错误主标记）。

或者在看到错误后，您可以在用户单击关闭按钮时使用 jquery 隐藏事件，然后它将隐藏。

JS Fiddle 链接：http://jsfiddle.net/abidkhanweb/mqz9j060/2/

试试这个：

$('.close').click(function() {
  $(this).parent().hide(); 
});

.main{ width:100%;}
.sub{width:23%; position:relative; background:green; height:80px; float:left; margin:1%;}
.sub .error{position:absolute; width:100%; left:0px; top:0px; background:red; height:100px; z-index:10;}
.sub .error .close{position:absolute; right:10px; top:10px; text-align:center; font-size:11px; background:#FF0; height:20px; width:35px; cursor:pointer; content:"";}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="main">
  <div class="sub"></div>
  <div class="sub">
    <div class="error">
      <span class="close">close</span>
    </div>
  </div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
</div>