CSS - div宽度取决于上面的图像大小 [英] CSS - div width depending on image size above
问题描述
< html>< head> < title>< / title> < meta http-equiv =Content-Typecontent =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。在purus nibh，ullamcorper在suscipit non，scelerisque eget sem。 < / p>< / div>< / body>< / html>
如您所见，带有黑色边框的框有一个自动宽度，可以根据内容调整。问题是，我想要的盒子的大小调整到图像里面的宽度。因此，如果图像具有像示例（红色框）上的宽度，下面的文本应该停在蓝点标记，并向下到一个新行..
<但是我该怎么做呢？
您的请求的问题是，如果div没有特定的宽度，文本不知道何时换行，这就是为什么它使用的外部div的宽度...
所以...你需要添加一个宽度到外部div或使用围绕图片+文字的div，该div的宽度。
编辑：
go：
http://jsfiddle.net/jnmtu/
我做了一个测试（在我的例子是第三个）一个表来测试它，并刷新我的想法如何它与表的工作，然后我应用它的CSS方式。
它是如何工作的：
你需要一个具有最小宽度（1％）的周围div，一张桌子;那么内部div（对应于单元格）应该有一个自动高度和隐藏溢出，这是需要强制它拖曳div的宽度+高度（这是一个常见的技巧）。
注意：我没有在Internet Explorer中测试，它适用于Firefox和Safari。
<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>
As you can see now, the box with the black border has an automatic width that adjust to the content inside. The problem is that I want the size of the box to adjust to the width of the image inside. So if the image has a width like on the example (the red box), the text beneath should stop at the blue-dotted mark and go down to a new line..
But how do I do that?
the problem with your request is that if the div doesn't have a specific width the text doesn't "know" when to wrap and that's why it uses the width of the outter div...
So... You need to add a width to the outter div or in case of using a div that surrounds the image + text, a width in that div.
EDIT:
here you go: http://jsfiddle.net/jnmtu/
I made a test (on my example is the third one) with a table to test it first and to refresh my mind of how it works with tables, and then I applied it to the CSS way.
How it works:
You need to have a surrounding div that has a minimal width (1%), and make it display as a table; then the inner div (corresponding to the "cell") should have an auto height and hidden overflow, this is needed to "force" it to strech the div's width + height (it's a common trick).
NOTE: I haven't tested in Internet Explorer, it does work with Firefox and Safari.
这篇关于CSS - div宽度取决于上面的图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
