根据高度自动换行吗？

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>

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

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

我做了一个 plnkr，你可以在上面重现它 更新

由于我得到了一些使用float的建议，并且我有一些难以解释问题的困难，我添加了一个新的草图来展示可能的目标。请注意，用户可以移动大型物品两侧的小型物品。

- Mario Levrero

---

嘿，你介意直接在问题中发布你的代码而不仅仅是在plnkr上吗？这样，如果plnkr出了什么问题，其他人仍然可以从这个问题中获得帮助。 - Hayden Schiff

在看到你的草图后，我立刻想到为什么不使用浮点数。似乎这些盒子有预定的大小，使用浮点数比调整弹性布局要容易得多... - Kjell

感谢@Kjell的建议。我尝试使用float: left，但它不允许我在一个大对象的左侧放置多个小对象（第一列项目2、3、4。第二列项目1）。我已经用这个分支修改了plunkr http://plnkr.co/edit/7fm9zO?p=preview。 - Mario Levrero

那么你最好使用一个网格库，比如：http://gridster.net。 - Kjell

试试这个 Plunk。也许会有帮助...http://plnkr.co/edit/qH25iYvzSDxIdPx2UDhF?p=preview - ShivangiBilora

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;
    }

或许这会有所帮助。

- Madalina Taina

---

谢谢，但是它和@Kjell的建议有相同的问题。左浮动将丢失的空间移动到左侧。我使用你的CSS分叉了plnkr，你可以在这里检查问题http://plnkr.co/edit/xzOMGX?p=preview - Mario Levrero

我在那里尝试过，还可以。我会再试一次。可能是我在这里改了什么。 - Madalina Taina

抱歉造成困惑。只是为了展示默认情况下出现问题时的行为。项目是可排序的，因此用户可以移动项目并在左侧获得丢失的空间。 - Mario Levrero

Madalina，你的plnkr中可以看到它是不可能的-正如我在plunkr中的斜体行中所评论的那样-使第一列具有小项在大项左侧的位置。请记住，这些项目是可排序的。我已经添加了一个新的草图来澄清这种情况。 - Mario Levrero

如果您将float属性设置为最高的div元素的右侧，并将其设置为最低div元素的左侧，那么就可以了。 - Madalina Taina

Answer 2

如果元素的高度是动态的，那么浮动不总是有效的，但是如果你可以确定宽度保持不变，你可以添加一些JS来移动元素以使其完美适配。

这里有一个JS Bin来展示结果http://jsbin.com/xeyife 在我之前做的这个Gist中，JS被包装在Angular中。

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

基本上，您可以通过循环遍历元素，并根据它们的左像素值将它们分组到列中。

var column='_'+left;

列的高度被存储，每次添加一个元素时，您都会通过该元素的高度增加列的高度。

columns[column]+=height;

通过设置边距将元素向上移动，从而关闭间隙。

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

你只能使用JS和CSS来实现这个功能

顺便说一句，我不确定CSS Flex会对此有所帮助，因为你的元素需要在同一个容器中

- Anthony Johnston