html - 如何修复最大宽度和浮动：左交互

Question

http://jsfiddle.net/Rncu6/

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

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

我该如何解决？

Answer 1

这似乎是一个非常令人沮丧的问题。我能想到解决它的最好方法是float:left从.pdisplay: 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 小提琴示例

---

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

p { word-break: break-all }

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

JS 小提琴示例

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/