<html><head>
<title></title>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.Box {background:gray;border:3px solid black;float:left;}
</style>
</head>
<body>
<div class="Box">
<img src="http://i.stack.imgur.com/shWOu.jpg">
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Vestibulum mattis ante ac sapien pellentesque vitae condimentum odio euismod. In purus nibh,ullamcorper in suscipit non,scelerisque eget sem. </p>
</div>
</body></html>
正如你现在可以看到的那样,带有黑色边框的框具有自动宽度,可以适应内部的内容.问题是我想要框的大小调整到内部的图像的宽度.因此,如果图像具有像示例(红色框)一样的宽度,则下面的文本应该以蓝点标记停止,并转到新行.
但是我该如何做呢？
解决方法
您的请求的问题是,如果div没有特定的宽度,文本不会“知道”什么时候包装,这就是为什么它使用外部div的宽度…
所以…您需要向外部div添加宽度,或者在使用围绕图像文本的div的情况下,该div中的宽度.
编辑：
干得好：
http://jsfiddle.net/jnmtu/
我做了一个测试(在我的例子是第三个)与一个表来测试它,并刷新我的想法,它如何工作与表,然后我应用到CSS的方式.
怎么运行的：
您需要具有最小宽度(1％)的周围div,并将其显示为表格;那么内部div(对应于“单元格”)应该有一个自动高度和隐藏的溢出,这是需要“强制”它来拉伸div的宽度高度(这是一个常见的技巧).
注意：我没有在Internet Explorer中测试,它可以与Firefox和Safari一起使用.
