Question

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

Answer 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/

我使用内联块来修复溢出问题，并使用vertical-align：top来放置图像的顶部与文本块的顶部内联。

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

使文本在div内保持相对

1 个答案: