使用css将div设置为无序

Question

我有超过6个div并且我希望使用css按照内容大小自动调整大小来设置它左移和一个接一个 如下图所示

这是我的代码：

<div class="main-container">
    <div class="container">
      <div class="title">test1</div>
      <div class="content">Testing of css html Long Content</div>
    </div>
    <div class="container">
      <div class="title">test2</div>
      <div class="content">Testing of css html Long Content</div>
    </div>
    <div class="container">
      <div class="title">test3</div>
      <div class="content">Testing of css html Short Content</div>
    </div> <!-- And so on ... -->
</div>

任何帮助都会很合适。感谢

Answer 1

您应该使用wookmark或masonry之类的JQuery插件来获得预期的输出。使用CSS无法填充上部空间。

你也可以尝试使用JQuery非常好的http://suprb.com/apps/gridalicious/。

Answer 2

据我所知，你不能仅使用CSS实现这一点。可以使用以下CSS解决方案，但每种解决方案都无法满足您的所有要求。

清除

float: left;

使用float：

可以实现这一切

为了实现这一目标，您必须clear float每第4个元素。建议使用

.container:nth-of-type(3n+1) { clear: both; }

display: flex;

使用display: flex;可以实现的目标是相似的，但所有.container在一个＆＃34;行＆＃34;将具有相同的height，这将由＆＃34;最高＆＃34; .container。

CSS columns

我知道创建一种类似布局的唯一方法就是使用css colums。 这确实有很大的缺点您的容器将首先按垂直顺序堆叠，并且只有在填充了列时，下一个.container才会被推送到下一列。所以2将低于 1，而不是它。

基于Javascript的解决方案

正如另一个答案中所提到的，有大量基于Javascript的解决方案。

找到前面提到的两个：

  

http://masonry.desandro.com/

     

http://www.wookmark.com/jquery-plugin

Answer 3

添加此样式：

<style>
.main-container{
    border:solid green 1px;
    width: 500px;
    height:200px;
}
.container{
    border:solid gray 1px;
    width:50px;
    height:auto;
    float:left;
}
</style>

使用height / width = auto可以根据您的提示使您的div灵活到其内容

希望这有帮助。