Question

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

我有一个带有块元素的浮动元素。

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

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

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

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

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

.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>

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

Answer 1

你设置宽度：20％;父母没有宽度供参考的块。

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

如果<li>在CSS中有宽度，那么它就会包装好。

如果div有值，则执行％value，它包装

它的错误导致你的CSS在某种程度上不连贯：）

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

Answer 2

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

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

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

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

Answer 3

改变方式：

.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;
}

比所有人都适合水平。

Answer 4

更好的选择是在thumbs的子元素上使用内联块，这允许文本根据需要填充大小空间。如果删除宽度，它将填充剩余空间。

.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;
}

浮动元素保持内部较窄块元素的完整“原始”宽度

4 个答案: