Question

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

到目前为止我所拥有的是

<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。但是，如果它有背景或边框，您可能需要在div上使用所有缩略图所在的clearfix。

Answer 2

这样的事情怎么样？

或者我完全错过了这一点？

http://jsfiddle.net/patonar/jxha3/2/

内联显示块元素

2 个答案: