1

我无法强制文本在其 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;
}
4

1 回答 1

1

这是一个开始，尝试以下 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/

我使用 inline-blocks 来修复溢出问题，并使用 vertical-align:top 将图像的顶部与文本块的顶部对齐。

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

于 2013-06-25T14:45:55.717 回答