根据高度水平包裹？答案

【问题标题】：Wrap horizontal based on height?根据高度水平包裹？
【发布时间】：2015-10-31 02:26:15
【问题描述】：

我使用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>

这些元素是可排序的，因此用户可以移动它们。固定位置的解决方案是不可能的。

是否可以使用polymer-shadow 解决它？有什么想法吗？

我做了一个plnkr where you can reproduce it

更新

由于我收到了一些使用 float 的建议，并且在解释我遇到的问题时遇到了一些困难，因此我正在添加一个新草图以显示一个可能的目标。注意用户如何移动大物品两侧的小物品。

【问题讨论】：

嘿，您介意将您的代码直接发布在您的问题中，而不是仅发布在 plnkr 上吗？这样，如果您的 plnkr 出现问题，其他人仍然可以从这个问题中获得帮助。
真的，@oxguy3 这很奇怪，通常当我发布一个没有代码的 plnkr 参考问题时，我会收到通知。我已经扩展了我的问题。
看到你的草图后，我想你为什么不使用花车。看起来盒子有一个预定的大小，这比摆弄弹性布局要容易得多......
感谢@Kjell 的建议。我试过float: left，但它不允许我在一个大对象的左侧有多个小对象（第一列项目2、3、4。第二列项目1）。我已经用这个 fork plnkr.co/edit/7fm9zO?p=preview 修改了 plunkr。
那么你最好使用网格库；喜欢：gridster.net

标签： html css polymer flexbox polymer-1.0

【解决方案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;
    }

也许这会有所帮助。

【讨论】：

谢谢，但它与@Kjell 的建议有同样的问题。向左浮动将丢失的空间移动到左侧。我用你的css fork plnkr，你可以在那里检查问题plnkr.co/edit/xzOMGX?p=preview
我在那里试过，没问题。我会再试一次。可能，我在这里改变了一些东西。
我就是无法理解。为什么你改变了html？ Fot初始html，第一列越大，CSS就可以了。
很抱歉给您带来了困惑。默认情况下，只是为了显示问题出现时的行为。项目是可排序的，因此用户可以移动项目并在左侧获得丢失的空间。
正是 Madalina，在您的 plnkr 中，您可以看到这是不可能的 - 正如我在 plunkr 的斜体行中评论的那样 - 在大的左侧创建第一列的小项目.请记住，这些项目是可排序的。为了澄清这种情况，我在问题中添加了一个新草图。

【解决方案2】：

如果元素的高度是动态的，那么浮动将不会像您所看到的那样总是有效，但是如果您可以说宽度保持不变，您可以添加一些 JS 来向上移动元素以使其更合适

这是一个显示结果的 js bin http://jsbin.com/xeyife

在这个要点中我做了一段时间 js 被包裹在角度

https://gist.github.com/MrAntix/c4edb6a14c9d419bfc44#file-index-html-L90

基本上你循环遍历按左像素值将它们分组到列中的元素

var column='_'+left;

列的高度被存储起来，每次添加元素时，列高都会增加元素高度

columns[column]+=height;

并且通过设置margin来向上移动元素，从而关闭间隙

cellElement.css({marginTop:(columns[column]-top)+'px'});

你只能用 JS 和 CSS 做到这一点

顺便说一句。我不确定 css flex 是否会有所帮助，因为您的元素需要在同一个容器中

【讨论】：