Question

绿色div有一个max-width属性，当屏幕缩小时它会收缩。

相反，发生的事情是绿色div落到另一条线上。如果我尝试remove绿色div上的float:left，它会突然与黄色div重叠，这不是我想要的。

我该如何解决这个问题？

Answer 1

这似乎是一个非常令人沮丧的问题。我可以考虑解决问题的最佳方法是从float:left中移除p并将其替换为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

Answer 2

以百分比形式给出宽度

 #img1 {
  background-color: yellow;
  width: 20%;
  height: 100px;
  float: left;
 }

p {
   float:left;
   margin-top: 0;
   max-width: 50%;
   background-color: lightgreen;
   margin-left: 10px;
   height: 200px;
 }

http://jsfiddle.net/Rncu6/11/

Answer 3

发生重叠是因为DOM的大小变得比浏览器大，所以它被推到了img div之下。如前所述，您可以使用％来弥补这一点。虽然，如果你想绝对定义div的像素，直到浏览器无法再显示它们。

要扩展当前答案，您可以使用媒体查询...

#img1 {
    background-color: yellow;
    width: 100px;
    height: 100px;
    float: left;
}

p {
    margin-top: 0;
    float: left;
    max-width: 300px;
    background-color: lightgreen;
    margin-left: 10px;
    height: 200px;
}

p:after {
    content: " ";
    display: block; 
    height: 0; 
    clear: both;
}

@media screen and (max-width: 450px) {

#img1 {
    width: 20%;
}

p {
    max-width: 50%;
}
}

这是jsfiddle - http://jsfiddle.net/SxLCJ/

如何修复max-width和float：left interaction

3 个答案:

JS Fiddle Example

JS Fiddle Example