css - float 元素保持内部较窄 block 元素的完整 "original"宽度

Question

我有一个可能很简单的问题。

我有一个 float 元素，里面有一个 block 元素。

在 block 元素内添加文本会水平扩展 block 元素以及父 float 元素(就像它应该的那样)。

如果我向内部 block 元素添加宽度，文本将被换行并且 block 元素变为该宽度。

但是， float 元素仍然和 block 元素一样宽，没有设置宽度，我希望它缩小到 block 元素的设置宽度。

文本是否有不可见的宽度？

这是一个非常简单的 fiddle ，它显示了我在说什么。

http://jsfiddle.net/bup88/

.thumbs li
{
   float:left;
  border:solid 1px black;
}
.thumbs div
{
  width:20%;
  border:solid 1px red;
}



<ul class="thumbs">
  <li>
 <img src="http://placehold.it/250X250" /> 
  <div>
    some text some text some text some text some text some textsome text some text
  </div>
</li>
</ul>

为什么 float 元素和没有宽度规则的 block 元素一样宽？

Answer 1

你设置宽度:20%；到父级没有宽度供引用的 block 。

我觉得奇怪的是看到那个，因为<li>是 float 的，你仍然得到 <li> 的这 20%以某种方式浏览器大小为 div 本身的平均大小？所以最后，div 占用其内容的 100%，然后调整为自身宽度的 20%。

如果<li>在 CSS 中有一个宽度，然后它会按原样包装。

如果 div 有一个值，除了 % 值，它会换行

它的错误导致你的 CSS 不知何故不连贯:)

http://jsfiddle.net/bup88/4/