邊框周圍 <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/