html - 使 div 的网格根据周围的元素移动

Question

我正在尝试将 div 元素的网格放入动态网格系统中。当所有元素的宽度和高度都是静态的(最重要的是全部相同)时，它通过在元素上设置 float:left 来获得所需的效果。

HTML:

<div id="main">
    <div class="someDiv">1 - Text</div>
    <div class="someDiv">2 - Text</div>
    <div class="someDiv">3 - Text</div>
    <div class="someDiv">4 - A lot longer text.</div>
    <div class="someDiv">5 - Text</div>
    <div class="someDiv">6 - Text</div>
    <div class="someDiv">7 - Text</div>
    <div class="someDiv">8 - Text</div>
    <div class="someDiv">9 - Text</div>
    <div class="someDiv">10 - Text</div>
</div>

CSS:

div.someDiv {
  float:left;
  margin: 10px;
  padding:5px;
  width:150px;
  display:inline-block;
}

但是，如果我有一个元素，其中包含较大的文本正文(因此具有比其他元素更大的高度)，则位于其下方和左侧的所有元素似乎都被“推”了下来。可以在这里观察到行为； jsFiddle .

我想做的是让所有 div 元素(在这个例子中是元素 5,6 和 7)刚好在它们上面的元素(元素 1,2 和 3)之下在 fiddle 中)。

我怎样才能做到这一点，同时仍然保持每个 div 的动态高度？

Answer 1

假设列具有固定宽度并且您可以使用固定数量的列，然后修改 html 以具有向左浮动的固定宽度列 (divs)。在其中放置等宽的 div，高度无关紧要。

如果您想要使用此方法的动态列数，则需要使用 javascript 移动内部 div 并根据宽度决定要具有的列数，然后将 dis 分配给列。

我相信 angularjs ui-grid 可以经常处理更复杂的情况。

编辑:这是一个 fiddle 来演示。 http://jsfiddle.net/6mDLC/也许我误解了你想要什么，如果 fiddle 没有做你想做的事，请告诉我

HTML:

<div class="main">
<div class="col">
  <div class="content">
      Some text
  </div>
    <div class="content">
      Some text
  </div>
    <div class="content">
      Some text ASFKLAJJK ALKSJFLF LAJ SFLKJAS LFKJA LSFJ ALSKFJASL FK ALSKFJ ALKFJ AL 
  </div>
    <div class="content">
      Some text
  </div>
</div>
<div class="col">
  <div class="content">
      Some text ASFKLAFJK ALKSJSKF LAJ SFLKJAS LFKJA LSFJ ALSKFJASL FK ALSKFJ ALKFJ AL 
  </div>
    <div class="content">
      Some text
  </div>
    <div class="content">
      Some text
  </div>
    <div class="content">
      Some text
  </div>
</div>
<div class="col">
  <div class="content">
      more text
  </div>
    <div class="content">
      Some text ASFKLAFJK ALKSJSKF LAJ SFLKJAS LFKJA LSFJ ALSKFJASL FK ALSKFJ ALKFJ AL 
  </div>
    <div class="content">
      Some text
  </div>
    <div class="content">
      Some text
  </div>
</div>

CSS:

.content{
  width:150px;
  border:1px solid red;
  margin-bottom:10px;
}
.col{
  margin:5px;
  float:left;
}

JS:

$(".content").click(function () {
if ($(this).html().length > 40) {
    $(this).html("This is just some random text");
} else {
    $(this).html("This is just some random text, but is taking up more space than it was before. This will cause others to do weird stuff.");
}
});