我希望<div>中的文字符合<div>的宽度，但在同一<div>中符合图片 }到父 <div>
这个图表应该清楚明白：
http://dl.dropbox.com/u/2792776/screenshots/2012-01-22_1838.png
（如果网址太小，则为以下网址：http://dl.dropbox.com/u/2792776/screenshots/2012-01-22_1838.png）
答案 0 :(得分：9)
我会解决这两种方式中的一种。这是想法＃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：
<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。
我认为你不会找到一个清晰，简单的方法来做到这一点。这是我最好的两个想法，可以通过其他方式解决。如果您要沿着这条道路前进来整理您的内容，您可能需要重新考虑您的策略以实现目标。
答案 1 :(得分：5)
如果你完全摆脱了内部div但是在外部div中的所有p标签上放置了400px的宽度怎么办？然后事情会正确地流动，图像将是外部div的子项，因此它们可能受到宽度的限制。
当然，如果有很多其他元素需要包含在400px区域内，这可能会导致一些问题，但如果它只是段落和一些标题，那么你就可以了。
答案 2 :(得分：5)
我改进了我的方法。我被Adam Dunn的answer启发了
您需要做的就是用img包裹每个<div class="sanitize">|</div>。可以在服务器端（推荐）或使用jQuery wrap调用（作为家庭作业留给读者）。
另外，仅允许div s {/ 1}}。
秘密是：
p中
div.border覆盖为max-width http://jsfiddle.net/HerrSerker/PSPyZ/9/
inherit !important<div class="container">
<div class="border"></div>
<div class="inner">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. .</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <div class="sanitize">
<img src="http://lorempixel.com/800/200/sports/2" /></div>
</p>
<div class="sanitize"><img src="http://lorempixel.com/800/200/sports/2" /></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<br clear="left" />
</div>
为什么不这样？
请参阅此处以获取示例：http://jsfiddle.net/HerrSerker/PSPyZ/
答案 3 :(得分：3)
使用一点点js，你可以避免所有的复杂化。
$(document).ready(function() {
//read every images
$("img").each(function(k,v) {
//get the width parent's parent
var width = $(this).parent().parent().innerWidth();
//use it
$(this).css('width',width);
});
});
答案 4 :(得分：1)
您可以使用CSS overflow属性来允许内容溢出容器的范围。在内部div上尝试overflow: visible。
答案 5 :(得分：1)
扩大Lazarus的回答：
在内部div上设置overflow:visible;。然后使用Javascript将图像的最大宽度设置为外部div的大小，即浏览器视口。可能是这样的事情吗？
document.body.innerdiv.img.style.maxWidth = window.innerWidth + 'px';
答案 6 :(得分：1)
#outer {position:absolute;top:0;left:1%;width:99%;}
#outer img{width:100%;position:absolute;left:0;}
我能想到的最好的是上面的线条，但它们不会包裹文本，因为绝对定位的元素会从流程中移除。
我认为 ellawren 提出了迄今为止最好的解决方案：“彻底摆脱内部div”。
你说：“DIV的内容由用户设定（他们可能不使用段落）”。
但是，您可以在对“内容”进行处理之前运行一个简单的REGEX模式。该模式将破坏div /段中的文本，这些文本位于图像标记/之前或之后。然后你可以单独设置图像样式。
也许有一些肮脏的CSS黑客，但黑客攻击永远不是解决问题的最佳方法。
答案 7 :(得分：1)
<强> HTML
<div class="outer">
<div class="inner"><p>Your content goes here</p>
<img src="http://dl.dropbox.com/u/2792776/screenshots/2012-01-22_1838.png" alt="" />
<p>Your content goes here</p></div>
</div>
<强> CSS
.inner { float: left; width: 400px; overflow: visible; }
.inner img { width: 2000px; }
<强>的jQuery
var browserWidth = $(document).width();
$('div.inner img').css('width', browserWidth);
答案 8 :(得分：1)
可以用纯css做这样的事。
<强> CSS
.container{
max-width:400px;
border:1px solid red;
}
.container > img {
width: 100%;
position:absolute;
height:200px;
}
img + p{
margin-top:200px;
}
答案 9 :(得分：1)
解决方案：将内部DIV向左浮动使其不如外部DIV宽，然后为内部DIV及其子项设置最大宽度。
HTML：
<div id="outer">
<div id="inner">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<img src="image.png" alt="image">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
CSS：
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#outer {
width: 100%;
height: 100%;
}
#inner {
max-width: 100%;
float: left;
}
#inner > * {
max-width: 400px;
}
#inner > img {
max-width: inherit !important;
}
DEMO： http://pastehtml.com/view/br8c4ht5n.html
（调整大小窗口显示OP要求。灰色是外部DIV。橙色是内部DIV。蓝色是实际IMG。）
答案 10 :(得分：0)
我相信你已经尝试了这个，但这不起作用
编辑：
<script type="text/javascript">
function viewport()
{
var width;
var height;
var e = window,
a = 'inner';
if ( !( 'innerWidth' in window ) )
{
a = 'client';
e = document.documentElement || document.body;
}
width = e[ a+'Width' ];
$('div#inner > img').attr('width', width);
}
</script>
您可以从以下网址阅读浏览器宽度代码：http：//andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
我刚刚编辑了一下并添加了jQuery位
#outer
{
width:100%;
float:left;
}
#inner
{
width:400px;
float:left;
}
<body onload="viewport();">
<div id="outer">
<div id="inner">
Text
<img scr="" />
Text
</div>
</div>
</body>
示例：http://projects.kausweb.com/stack
我不确定你是否想要javascript思想
答案 11 :(得分：0)
我过去曾使用过最大宽度方法，但还必须包含一个最小宽度，以防止我的图像过于瘦。
此外，如果您将内部div视为一系列内容块，您的文档可能会更直观地流动，并且您不需要大量定位等。
#outer > div { width:400px; border:1px dotted gray; }
#outer > img { max-width:100%; min-width:400px }
<div id="outer">
<div>Inner div block 1 content and whatnot. Inner div block 1 content and whatnot.<div>Nested block within div block 1 with image...<img src="http://jsfiddle.net/img/logo.png"></div></div>
<img src="http://www.alenawooten.com/wp-content/uploads/2012/01/images1.jpg">
<div>Inner div block 2 content and whatnot. Inner div block 2 content and whatnot.<div>Nested block within div block 2 with image...<img src="http://jsfiddle.net/img/logo.png"></div></div>
<img src="http://www.alenawooten.com/wp-content/uploads/2012/01/images1.jpg">
</div>
这是一个jsfiddle：http://jsfiddle.net/B4gKS/ 滑动中央分隔线以查看效果。
答案 12 :(得分：0)
我认为你无法使用纯CSS实现这一目标。这是一个使用一点Javascript的例子。
<div class="outer">
<div class="inner">
some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
<img src="http://tinyurl.com/7pl9cw8" />
<p>more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text</p>
</div>
</div>
.outer {
margin: 40px;
border: 2px solid black;
padding: 10px;
min-width: 404px;
}
.inner {
border: 2px solid black;
width: 400px;
}
function changeWidth() {
var ele = document.getElementsByTagName("img");
var width = (document.getElementsByTagName("div")[0].offsetWidth - 28) + "px";
for(var i = 0; i < ele.length; i++) {
ele[i].style.width = width;
}
}
window.onload = window.onresize = changeWidth;