根据高度包裹水平？

Question

我正在使用layout horizontal wrap根据其大小和容器找到一些项目.这些物品有不同的尺寸,所以有时我会在它们下方失去很多空间.

如果我向你展示情况的草图,那就更好了......

我的相关代码如下:

<style>
  .high {
      height: 200px;
    }

    .low {
      height: 50px;
    }

    .object {
      min-width: 200px;
    }
</style>
<div class="layout horizontal wrap" style="height:auto" id="container">
  <div class="object high">
    <p>1</p>
  </div>
  <div class="object low">
    <p>2</p>
  </div>
  <div class="object low">
    <p>3</p>
  </div>
  <div class="object low">
    <p>4</p>
  </div>
</div>
<script type="text/javascript">
  $(function() {

      $("#container").sortable({
        cursor: "move"
      });
    });
</script>

这些元素是可排序的,因此用户可以移动它们.无法使用固定位置的解决方案.

是否可以使用聚合物阴影来解决它？任何的想法？

我做了一个plnkr,你可以重现它

更新

当我得到一些使用浮点数的建议时,我遇到了一些难以解释我遇到的问题,我正在添加一个新的草图来显示可能的目标.注意用户如何移动大项目两侧的小项目.

Answer 1

这个 CSS 使设计看起来像你的线框：

  <div class="object high">
  <p>1</p>
</div>
<div class="object low">
  <p>2</p>
</div>
<div class="object low">
  <p>3</p>
</div>
<div class="object low">
  <p>4</p>
</div> 

 #container{
          display:table;
          float:left;
          width:100%;
        }

        .object.high {
          height: 200px;
          display:table-cell;
          float:right;
          width:49%;
          margin-left:1%;
        }

        .object.low {
          height: 50px;
          width:24%;
          margin-right:1%;
          display:table-cell;
          float:left;
        }

更新：

 #container{
      display:table;
      width:420px !important;
    }

    .object.high {
      height: 200px;
      display:table-cell;
      width:200px !important;
      margin:0;

    }
    .object.low {
      height: 50px;
      width:100px !important;
      margin:0;
    }

也许这会有所帮助。