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

据我所知，您不能仅使用CSS来实现这一点。下面的CSS解决方案是可能的，但每个解决方案都不能满足您的所有需求。

带清除的float: left;

这是使用float所能达到的全部目标。

​

​

要使其工作，您必须每第4个元素就对clear进行float。建议使用

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

display: flex;

使用display: flex;可以实现的目标是相似的，但是在一个“行”中的所有.container都将具有相同的height，这将由“最高”的.container决定。

CSS columns

我所知道的创建布局类型的唯一方法，如您所展示的，就是使用css列。这确实有一个巨大的缺点，即容器将首先按垂直顺序堆叠，并且只有当一个列被填充时，下一个.container才会被推送到下一列。因此，2将是低于 1，而不是它的权利。

基于Javascript的解决方案

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

找到前面提到的两个：

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

Answer 2

您应该使用JQuery插件(如伍克马克或砌体 )来实现预期的输出。使用CSS，您无法填补上面的空间。

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

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>

通过使用高度，/width = auto可以使您的div按照您的提示灵活处理其内容。

希望能帮上忙。