在图像的上边框上对齐文本

Question

早安，

这就是我所拥有的：http://postimg.org/image/n0i0671ul/

这就是我想要实现的：http://postimg.org/image/4ql3bdq2z/

我已经包装了标志并将它们浮动到右侧，然后我设置了样式 css 以将每个图像浮动到左侧（因此将正确保持顺序）。我想在我的图像上添加文本框，但是我无法真正实现这一点。谁能给我一些建议吗？

#flagLine {
   float: right;
   padding-right: 50px;
   padding-left: 10px;
   padding-bottom: 10px;
}

#flagLine a img {

    float: left;
    position: relative;
    margin: 10px 10px 10px 10px;
    border-style: solid;
    border-color: black;
    border-width: 1px;

}

#flagLine h4 {
    vertical-align: top;
}

<div id="flagLine">
  <a href="https://internal.cs.ncl.ac.uk/modules/2013-14/csc1026/flags/letters/100_ICS_Alpha.svg.png"><img src="1.png" title='"I have a diver down; keep well clear at slow speed."' /></a><h4>A-Alpha</h4>
  <a href="https://internal.cs.ncl.ac.uk/modules/2013-14/csc1026/flags/letters/100_ICS_Bravo.svg.png"><img src="2.png" title='"I am taking in, or discharging, or carrying dangerous goods."'/></a><h4>B-Bravo</h4>
 <a href="https://internal.cs.ncl.ac.uk/modules/2013-14/csc1026/flags/letters/100_ICS_Charlie.svg.png"><img src="3.png" title='"Affirmative."'/></a>

提前谢谢你

Answer 1

问题：

您只浮动剩下的图像，这会创建错误的布局。

解决方案：

您需要将带有标题的图像包装在 div 中，并将 div 向左浮动。
这将使您的图像和标题保持在一起并一起浮动。

示例FIDDLE

HTML：

<div class="wrap">
    <p>Flag Name</p>
    <img src="http://placekitten.com/g/200/200" />
</div>
<div class="wrap">
    <p>Flag Name</p>
    <img src="http://placekitten.com/g/200/200" />
</div>
...

CSS：

.wrap {
    float:left;
}
.wrap img {
    width:200px;
    height:200px;
}