2

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

我有一个浮动元素，里面有一个块元素。

在块元素内添加文本会水平扩展块元素以及父浮动（就像它应该做的那样）。

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

但是，浮动元素仍然与没有设置宽度的块元素一样宽，我希望它缩小到块元素的设置宽度。

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

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

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>

为什么浮动元素与没有宽度规则的块元素一样宽？

4

4 回答 4

2

您设置宽度：20%；到父级没有宽度可供参考的块。

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

如果<li>在 CSS 中有一个宽度，那么它会按原样换行。

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

它的错误会导致您的 CSS 以某种方式不一致:)

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

于 2013-06-21T16:58:14.577 回答
2

我不是 CSS 专家，所以如果以下任何假设不正确，请告诉我。

我认为这是由于您width在块元素上使用了百分比，它将查看父元素（浮动元素）的宽度值，它应该使用百分比来计算最终宽度。

为了弄清楚这个百分比宽度，我猜布局引擎首先计算没有百分比规则的块元素的宽度，然后将浮动父元素设置为该宽度，就像不存在百分比规则一样. 现在浮动元素具有定义的宽度，子块元素可以计算其百分比宽度。但是，此计算不会影响浮动父元素的宽度，因为它已经布置好了。

将宽度设置为类似px，或将布局类型从块更改为内联（如 j08691 建议的）将使其表现得更符合您的预期。

于 2013-06-21T16:59:44.707 回答
1

CHANGE THAT WAY:

.thumbs div{
  float:right;/* UPDATE WITH */
  width:20%;/* CHANGE WITH THE SIZE THAT YOU WANT FOR THE DIV */
  border:solid 1px red;
}
.thums img{
  float:left;
}

Than all will fit horizontal.

于 2013-06-21T16:51:53.420 回答
1

更好的选择是在子元素上使用 inline-blockthumbs允许文本填充您需要的大小空间。如果删除宽度，它将填充剩余空间。

.thumbs img {
  display: inline-block;
  vertical-align: top;
  zoom: 1;
}
.thumbs div
{
  display: inline-block;
  vertical-align: top;
  width:20%;
  border:solid 1px red;
  zoom: 1;
}
于 2013-06-21T17:06:16.563 回答