边框周围 <div> 元件

Question

我想连续显示3张图片（我不想使用表格，因为它不是表格数据，只是一行包含3张图片...）我有以下HTML可以正常运行：

 <div>
   <span class="step"><img src="" alt="step one" class="image" ></span>
   <span class="step"><img src="" alt="step two" class="image"></span>
   <span class="step"><img src="" alt="step three" class="image"></span>
 </div>

当我在每个图像上添加边框时，问题就开始了（如果文本用来描述每个图像的含义，我也添加了一点）。 我在HTML中进行了以下操作，

 <div>
   <span class="step">First Step <img src="" alt="step one" class="image" ></span>
   <span class="step">Second Step <img src="" alt="step two" class="image"></span>
   <span class="step">Third Step <img src="" alt="step three" class="image"></span>
 </div>

在CSS中

.step{
  width:200px;
  height:150px;
  border: 1px solid red;
}

我原本希望看到一个带有图像和文字的盒子，但是我只能在文字周围得到一个奇怪的盒子。 关于如何将边框添加到span元素的任何想法？

Answer 1

添加display: inline-block 。 inline元素没有宽度或高度。 block元素将创建换行符。 使用inline-block获得折衷。 http://caniuse.com/#feat=inline-block

如果要支持IE 6和7，则对跨度（而不是div）进行内联阻止。

http://jsfiddle.net/mDHn9/

或者，就像GustavoCostaDeOliveira坚持的那样，使用float: left 。

http://jsfiddle.net/6VmBj/

Answer 2

是的，“ span”以内联方式显示...将“ span”更改为“ div”或在CSS规则中添加display：block

Answer 3

是的，使用display: block; 因为span默认是内联的

.step{
  display: block;
  width:200px;
  height:150px;
  border: 1px solid red;
}

Answer 4

尝试添加到CSS

向左飘浮;

.step{
  width:200px;
  height:150px;
  border: 1px solid red;
  float: left;
}

http://jsfiddle.net/NYwVd/