我想将文本放在< div>到< div>的宽度,但适合相同的< div>中的图像.到父级的宽度< div>
这个图应该清楚：
http://dl.dropbox.com/u/2792776/screenshots/2012-01-22_1838.png
(这是URL,如果它太小：http://dl.dropbox.com/u/2792776/screenshots/2012-01-22_1838.png)
解决方法
我会解决这两种方法之一.这是#1的想法
CSS
#inner {width:400px; position:relative; float:left;}
HTML：
<div id="inner">
<img src="awesomeimage.jpg" alt="this awesome image" />
<p>text goes here</p>
<img src="awesomeimage.jpg" alt="this awesome image" />
</div>
脚本：
<script>
var imgWidth = $(window).outerWidth();
$('#inner > img').css({
width : imgWidth + 'px'
});
</script>
这是假设你已经加载了jQuery,而且你在你的网站上使用Javascript.如果要调整图像的宽度,填充,边距和边框,请在变量中进行.
您可以使用窗口进行图像缩放,就像我为另一个问题创建的JS小提琴中使用的示例：http://jsfiddle.net/D544n/1/
想法#2：使用Javascript.
CSS
#outer {width:100%;} /* Outer becomes irrelevant */
#inner {width:100%;}
#inner img {width:100% !important}
#inner * {width:400px;} /* Set all childs to 400 */
HTML：
<div id="outer">
<div id="inner">
<img src="awesomeimage.jpg" alt="this awesome image" />
<p>text goes here</p>
<img src="awesomeimage.jpg" alt="this awesome image" />
</div>
</div>
从另一个S.O. Question获得了选择.
我不认为你会找到一个清晰,简单的方法来做到这一点.这些是我最好的两个想法,也可以用其他方式解决.如果您正在沿着这条路径组织您的内容,您可能需要重新考虑您的策略来实现您的目标.
