html - 如何修复最大宽度和 float :left interaction

Question

http://jsfiddle.net/Rncu6/

绿色的div有一个max-width属性，它应该随着屏幕缩小而缩小。

相反，绿色的 div 会掉到另一行。如果我尝试 remove绿色div上的float:left，突然和黄色div重叠了，这不是我想要的。

我该如何解决这个问题？

Answer 1

这似乎是一个非常令人沮丧的问题。我认为解决它的最佳方法是从 p 中删除 float:left 并将其替换为 display: table-cell .

p {
  display: table-cell; /* replaces float:left */
  max-width: 300px;
  background-color: lightgreen;
  height: 200px;
}

这种方法的唯一问题是它会使所有 margin 属性变得无用。要解决这个问题，您只需将那些 margin 属性的逆向添加到 #img1。例如:

p { margin-left: 10px; } 

将替换为:

#img1 { margin-right: 10px; }

JS Fiddle Example

---

警告:我不知道您希望最小宽度变得多小，但您会注意到在某个点 p 仍会移动到下一行。这是因为单个单词(例如“段落”等较长的单词)变得太小而无法放在一行中。要解决此问题，您可以使用 word-break:break-all;属性。

p { word-break: break-all }

这样，p 的宽度将继续缩小，直到宽度不再适合一行中的单个字符。

JS Fiddle Example