-1

私はこのようなページに多くのdivを持っています：

ここに画像の説明を入力してください

この画像をインラインでディップスレイして塗りつぶす方法

これは私の情報源です

<div id="ranks_content">
    <img src="/Ranks/GetRankImage/1" alt="Recruit" class="rank_picture"/>
    <img src="/Ranks/GetRankImage/2" alt="Apprentice " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/3" alt="Apprentice " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/4" alt="Private " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/5" alt="Private " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/6" alt="Copral " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/7" alt="Copral " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/8" alt="Sergeant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/9" alt="Sergeant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/10" alt="Sergeant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/11" alt="Gunnery Sergeant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/12" alt="Gunnery Sergeant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/13" alt="Gunnery Sergeant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/14" alt="Gunnery Sergeant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/15" alt="Lieutenant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/16" alt="Lieutenant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/17" alt="Lieutenant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/18" alt="Lieutenant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/19" alt="Captain " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/20" alt="Captain " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/21" alt="Captain " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/22" alt="Captain " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/23" alt="Major " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/24" alt="Major " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/25" alt="Major " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/26" alt="Major " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/27" alt="Commander " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/28" alt="Commander " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/29" alt="Commander " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/30" alt="Commander " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/31" alt="Colonel " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/32" alt="Colonel " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/33" alt="Colonel " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/34" alt="Colonel " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/35" alt="Brigadier " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/36" alt="Brigadier " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/37" alt="Brigadier " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/38" alt="Brigadier " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/39" alt="General " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/40" alt="General " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/41" alt="General " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/42" alt="General " class="rank_picture"/>
</div>

編集：CSS3を使用しています。これは、この画像を表示する方法の例です。

ここに画像の説明を入力してください

4

2 に答える 2

1

2番目の画像を見て、最終目標を達成する方法をよりよく説明するために、フィドルの例を作成しました。

フィドルの例を参照してください！

HTML構造

<div id="ranks_content" class="clearfix">
  ...
  <div>
    <span>Commander</span>
    <img alt="" src="path_to_image.png" width="64" height="64">
    <span>5.0</span>
  </div>
  ...
</div>

それを実現するためのCSS

/* not needed, used just for the demo */
body {
  background-color: #F2F2F2;
}
#ranks_content {
  margin: 0 auto;background-color: #FFF;
}

/* the necessary HTML starts here */
#ranks_content > div {
    padding: 6px;
    text-align: center;
    float: left;
}
#ranks_content > div > span {
    display: block;
    font-size: 11px;
}
#ranks_content > div > img {
    margin: 0 auto;
}

/* helpers */
.clearfix:before,
.clearfix:after  {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}

ここに画像の説明を入力してください

ノート：

画像の配置方法についてサポートを求めていますが、2番目の画像はテキストを使用することを示しているため、すべての画像と関連するテキストをで囲むのが最善の方法divです。を左にフロートdivさせると、画像を並べて表示できます。

于 2012-05-14T18:54:29.820 に答える
1

これで大丈夫ですか？

imgの幅を設定するだけです：

http://jsfiddle.net/7WrUn/2/

.rank_picture
{
    width:100px;
}​

編集

エンハンスバージョンを参照してください：http：//jsfiddle.net/7WrUn/2/

ここに画像の説明を入力してください

ps：iveは、最終結果を確認できるようにjQueryを追加しています。

altをタイトルとして表示することです。しかし、私のフィドルでは、画像がないので、2回表示されます。

持っている場合は、一度+値が表示されます。

于 2012-05-14T18:27:29.073 に答える