Question

我正在尝试使用在线div在行列中显示div。这是相同的

同样如下：

 <style>

*{
    margin:0px;
    padding:0px;
}
.changed{
    display:inline-block;
    vertical-align:top;
}


</style>
</head>

<body>
<div style="border:1px solid #F00; width:900px; min-height:1000px">
  <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div>
  <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:20px;"></div>
  <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div>
  <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div>
  <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:37px;"></div>
  <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div>


</div>

如果您看到第一行中的第二个div很小，那么第5个第二个（第2行第二个）必须出现，但完整的第二行在相同的垂直线上开始。这是我想要获得的图像。

http://i39.tinypic.com/22hjlg.png

提前致谢

Answer 1

只有css才能实现你的努力。

您展示的图片是插件Masonry的用途。 http://masonry.desandro.com/

Answer 2

如果您不介意重新排序div，可以通过将每列分组到自己的div中来实现这样的布局。在列上添加float:left，然后从内部div中删除display:inline-block。像这样：

<div style="border:1px solid #F00; width:900px; min-height:1000px">
  <div style="float:left">
    <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div>
      <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div></div>  
  <div style="float:left">
    <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:20px;"></div>
    <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:37px;"></div></div>  
  <div style="float:left">
    <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div>  
    <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div>
  </div>
</div>

我不确定这是否符合您的需求，因为它不使用内联div，而div需要按列排序。但是，如果你真正关心的是获得看起来像你的形象的东西，这将有效。

Answer 3

我认为用列排序你的布局应该可以解决问题。

<div class="column">
  <!-- your content here -->
</div>

与关联的css：

.column { display: inline-block; width: 100px; vertical-align: top; }

此处更新了小提琴：http://jsfiddle.net/b5d3s/3/

使用内联块显示Div

3 个答案: