1

我正在尝试使用在线 div 在行列中显示 div。这里是一样的

https://jsfiddle.net/sreeram62/b5d3s/1/

下面同样的事情：

 <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 个（第二行第二个）必须出现，但完整的第二行从同一垂直线上开始。

4

3 回答 3

2

仅使用 CSS 是不可能做到的。

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

于 2013-05-23T14:48:10.040 回答
0

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

<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 需要按列排序。但是，如果您真正关心的是获得看起来像您的图像的东西，那么这将起作用。

于 2013-05-23T15:00:27.507 回答
0

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

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

与相关的 css ：

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

在这里更新小提琴：https ://jsfiddle.net/b5d3s/3/

于 2013-05-23T16:50:20.093 回答