html - 如何显示 div 内联。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 宽度：

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

.rank_picture
{
    width:100px;
}​

编辑

查看增强版：http: //jsfiddle.net/7WrUn/2/

ps：我一直在添加一些 jQuery，以便您看到最终结果。

我的事情你显示 alt 作为标题。但是在我的小提琴中-您会看到两次-因为我没有任何图像。

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

Answer 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;
}

笔记：

由于您正在请求有关如何定位图像的帮助，但您的第二张图像显示您将使用一些文本，因此最好的方法是将每个图像和相关文本包装在div. 将浮动div到左侧将允许图像并排保持。