将div中的图像对齐到另一个div中的文本后面

Question

我正在努力实现这个目标（PNG模型）：

尝试此操作（jsfiddle）：

HTML：

<div class="container">
    <div class="traintext">The East London Line part of the London Overground line that runs north to south through the East End, Docklands and South areas of London.</div>
    <div class="trainimage"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Unit_378150_at_Whitechapel.jpg/300px-Unit_378150_at_Whitechapel.jpg"></div>
    </div>
</div>

CSS：

.container {
    width: 500px;
    height: 300px;
    background-color: blue;
}

.traintext {
    color: white;
    font-size: 18px;
}

.trainimage {

}

但我不确定我需要做些什么才能将 .trainimage 和 .traintext 放在正确的位置。

Answer 1

一种选择是绝对定位文本;从而将其从流中移除并将其放置在浮动的img元素上。 EXAMPLE HERE

.traintext {
    color: white;
    font-size: 18px;
    position:absolute;
}

.trainimage {
    float:right;
}

你不应该对这种方法有任何问题;鉴于父.container已经定义了维度（意味着它因浮动/绝对定位的元素而不会崩溃）