CSS中的Span问题

Question

我有两个span，我希望span1正好低于span2，即使span1的高度动态变化

<span id="Div3" style="Z-INDEX: 126; LEFT: 8px; WIDTH: 99.06%; TOP: 5px; visibility: visible;"
                runat="server" ><asp:image id="Image1" 
                style="Z-INDEX: 127; LEFT: 16px; right: 709px;" runat="server"
tabIndex="10"></asp:image></span>

上面的Span有一个图像，它的高度可以动态改变。

我想要这个span

<span>Exactly below the image</span>

有人能帮忙吗??

Answer 1

我创建了2个span。一个含img，一个含h1。

<span class="span1">
    <img src="http://www.online-image-editor.com/styles/2013/images/example_image.png" alt="">
</span>
<span class="span2">
    <h1>I'm span #2!</h1>
</span>

两个span s i都给出了block的display性质。这将使它们堆叠在一起。

span {
    display: block;
}

给img一些width和height。

.span1 > img {
    height: 200px;
    width: 200px;
}

演示

Answer 2

你忘记设置:position: absolute和top:在两个跨度. ...如果你想绝对地定位它们。

如果你只是想让它们在文档流中，然后从你的样式中删除top/left/z-index -它们在结果上没有任何结果，直到你添加position:absolute;或position:relative;。