<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>正如您现在所看到的,带有黑色边框的框具有自动宽度,可根据内部内容进行调整.问题是我希望盒子的大小调整到里面图像的宽度.因此,如果图像的宽度类似于示例(红色框),则下方文本应停在蓝点标记处并向下移动到新行.
但是我该怎么做？
jac*_*Joe 22
您的请求的问题是,如果div没有特定的宽度,文本不会"知道"何时换行,这就是为什么它使用outter div的宽度...
所以...你需要在outter div中添加一个宽度,或者在使用围绕图像+文本的div时,需要为该div添加一个宽度.
编辑:
你去吧:http: //jsfiddle.net/jnmtu/
我做了一个测试(在我的例子中是第三个),用一个表来测试它,并刷新我对它如何与表一起工作的想法,然后我将它应用于CSS方式.
这个怎么运作:
你需要有一个具有最小宽度(1%)的周围div,并使其显示为一个表格; 然后内部div(对应于"单元格")应该有一个自动高度和隐藏溢出,这需要"强制"它拉伸div的宽度+高度(这是一个常见的技巧).
注意:我没有在Internet Explorer中测试过,它可以与Firefox和Safari一起使用.