html - 内联显示 block 元素

Question

我正在尝试制作一个由一系列包含图像和一些文本的 div 组成的布局，其中 div 包含在另一个 div 中，该 div 足够大以并排容纳 2 个较小的 div，并且其中div 以内联方式运行，以便自然地将它们自己组织成两列，但如果我将另一个 div 添加到列表的顶部，所有内容都会向下移动一个位置。这是我正在尝试做的事情的草图，如果我的描述让你感到困惑的话:http://i.imgur.com/D5y4M.jpg我意识到这有点不合常规，但我这样做主要是因为我可以(除非我不能......)

我目前的情况是

<div class="thumbcontainer">
  <a href="test.html"><img src="images/balls.png"></a>
  <span class="caption">Balls</span><br>
  <span class="description">Balls balls balls</span>
</div>

.thumbcontainer {
  width:            450px;
  display:          inline;
  margin:           0px 20px;

但是现在将 div 显示为内联只会将它们的水平边距折叠到包含的 div 中；它们仍然在垂直线上一个接一个地显示。我正在尝试做的事情可行吗？？

Answer 1

不使用 display: inline，而是使用 float: left。但是，您可能需要在所有 thumbcontainer 所在的 div 上使用 clearfix，如果它有背景或边框的话。