使文本在div内保持相对

我无法强制文本在其div中保持相对并与图像高度相同。所以当浏览器调整大小时，它不会溢出。我正在创建一个响应式网页。我希望我已经清楚地解释了这一点。请看看我的http://jsfiddle.net/DMnhB/1/使文本在div内保持相对

的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; 
}

来源

2013-06-25 Kadeem Laurie

为什么不使用'@ media'查询在特定点之后移动图像下的文本？另外，你应该在该图像上有最小宽度。我不明白你为什么需要这么一小段文字。 – Daniel

这样的事情：http://jsfiddle.net/DMnhB/3/？ – stackErr

@丹尼尔好主意，我会用媒体查询。文本并不意味着那么窄。这只是因为我多次使用
。这只是为了强调我希望文本的高度与图像相关的事实。 –

下面是一个开始，请尝试以下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来放置图片的顶部并与文本块的顶部内嵌。

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

来源

2013-06-25 14:45:55

谢谢Marc。我意识到我只能通过使用媒体查询来实现完全的相对性，并结合您刚刚提供的代码来修复溢出问题。 –

使文本在div内保持相对

回答

相关问题