2

3 つの画像を連続して表示したい (表形式のデータではなく、1 行に 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;
}

画像とテキストを含むボックスが表示されることを期待していましたが、代わりにテキストのみの周りに奇妙なボックスが表示されます。境界線をスパン要素に追加する方法についてのアイデアはありますか?

4

4 に答える 4

0

cssに追加してみる

フロート: 左;

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

http://jsfiddle.net/NYwVd/

于 2013-10-24T19:52:23.200 に答える