html - 使文本在div内保持相对

我在强制文本相对不超出其div且与图像保持相同高度时遇到麻烦。因此，调整浏览器大小时，不会溢出。我在创建响应式网页时正在执行此操作。我希望我已经清楚地解释了这一点。请检查我的http://jsfiddle.net/DMnhB/1/

html如下：

<div id="postd"><img
src="http://www.tntmagazine.com/media/content/_master/42628/images/barack-obama.jpg">

<span>
Text Here
Text Here
Text Here
</span>
</div>

和CSS：

#postd{
width:100%;
padding-bottom: 5%;
background-color: blue;
padding-top:6%;
border-bottom: 1px dotted #ccc;
}

#postd img{
width:40%;
}
#postd span{
float:right;margin-left:1px;
position: absolute;
background-color: red;
}

最佳答案

这是一个开始，请尝试以下CSS：

#postd {
    width:100%;
    padding-bottom: 5%;
    background-color: blue;
    padding-top:6%;
    border-bottom: 1px dotted #ccc;
}
#postd img {
    width:40%;
    display: inline-block;
    vertical-align: top;
}
#postd span {
    display: inline-block;
    margin-left:1px;
    background-color: red;
}

您可以看到它的外观：http://jsfiddle.net/audetwebdesign/DMnhB/2/

我使用内联块修复了溢出问题并垂直对齐：从上到下
图片的顶部与文本块的顶部对齐。

在进行任何其他调整之前，您需要提供一些其他反馈。