如何显示内联div。 css html

Question

我在页面上有很多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，这是我想要显示此图像的示例

Answer 1

会没事吗？

只需设置img width：

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

.rank_picture
{
    width:100px;
}​

修改

请参阅增强版：http://jsfiddle.net/7WrUn/2/

P.S。 ： 我一直在添加一些jQuery，以便您查看最终结果。

我把你的alt显示为标题。但在我的小提琴 - 你看到它两次 - 因为我没有任何图像。

如果你有，你会看到他们一次+值。

Answer 2

展望你的第二张图片，我制作了一个小提琴示例，以更好地说明如何实现最终目标：

请参阅Fiddle Example!

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>

让HHPEN发生的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;
}

备注：

由于您要求提供有关如何定位图像的一些帮助，但是您的第二张图像显示您将使用某些文本，最好的方法是将每个图像和相关文本包装在div内。将div向左浮动将允许图像并排保留。