使用 inline-block 显示 Div答案

【问题标题】：Div display using inline-block使用 inline-block 显示 Div
【发布时间】：2013-05-18 23:29:37
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案1】：

仅使用 CSS 是不可能实现的。

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

【讨论】：

有趣，我刚查了同位素。它们是由同一个人编写的，并且具有相似的功能。 Isotope 有更多的功能，但根据该网站，它不能免费用于商业用途。这是一篇堆栈溢出文章，更深入地解释了差异stackoverflow.com/questions/8856893/…
@cjd82187 谢谢，我觉得这行得通。感谢您的快速回复。

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

【讨论】：

感谢您的回复。实际上这是动态发生的。我正在尝试在 3 列中显示 wordpress 帖子页面。因此，当每个帖子的大小不同时，就会出现问题。

【解决方案3】：

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

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

与关联的 css ：

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

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

【讨论】：