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

对齐图像顶部边框上的文本

1 个答案: