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

但是，如果我有一个元素在其中有更大的文本体（因此具有比其他元素更大的高度）所有在这个下面和左边的行上的元素似乎是＆＃34;推＆＃34;下。在这里可以观察到行为; jsFiddle

我想要做的是让所有div个元素（在这个例子中，这将是元素5,6和7）就在它们上面的元素之下（元素1,2和3在小提琴中））。

如何在保持每个div的动态高度的同时实现这一目标？

Answer 1

假设列具有固定的宽度并且您可以使用固定数量的列，那么将html重写为具有向左浮动的固定宽度列（div）。在它们中放入相等宽度的div，高度无关紧要。

如果您希望使用此方法获得动态数量的列，则需要使用javascript移动内部div并根据宽度确定cols的数量，然后将dis分配给列。

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

编辑：这是一个小提琴演示。 http://jsfiddle.net/6mDLC/ 也许我误解了你想要的东西，让我知道如果小提琴没有做你想做的事情

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.");
}
});

Answer 2

尝试使用此

div.someDiv {
float:left;
margin: 10px;
padding:5px;
background:aqua;
width:150px;
display:inline-block;
overflow:auto;
height:50px;

}

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

2 个答案: