最大宽度不适用于浮动答案

【问题标题】：max-width doesn't work with float最大宽度不适用于浮动
【发布时间】：2025-11-23 12:35:01
【问题描述】：

我正在尝试设计一个响应式页面。我有 2 个高度相同的 div。它们都具有 max-width 属性并且 max-width 正在工作。一旦我添加了 float:left 属性，max-width 就不会影响它们。

这是一个例子：jsfiddle

<div class="color1">
   Some Text
</div>
<div class="color2">
    Bla
</div>
<div style="clear: both;">

和 CSS：

div{
    height: 100px;
    float: left;
}
.color1{
    background-color: #6AC1FF;
    max-width: 400px;
}
.color2{
    background-color: #BDBCF4;
    max-width: 100px;
}

我希望它们垂直对齐。除了浮动和保持最大宽度？

【问题讨论】：

display: box; 无效。你的意思是块还是内联块？
之后您是否尝试过清除它们？添加一个具有clear: both; 属性的类，然后在两个框之后使用该类创建一个 div。
显示：内联，或显示：内联块。
*更新了我的代码并且已经尝试过内联、内联块。不工作...
浮动的元素会缩小到其内容的宽度。

标签： css-float responsive-design css

【解决方案1】：

使用定义的宽度百分比和浮动：http://jsfiddle.net/dEEW5/3/

div{
    height: 100px;
    display:block;
    float:left;
}
.color1{
    background-color: #6AC1FF;
    width: 80%;
    max-width:400px;
}
.color2{
    background-color: #BDBCF4;
    width: 20%;
    max-width:100px;
}

使用内联块定义的宽度百分比：http://jsfiddle.net/dEEW5/4/

body{font-size:0}
div{
    height: 100px;
    display:inline-block;
    font-size:16px;
}
.color1{
    background-color: #6AC1FF;
    width: 80%;
    max-width:400px;
}
.color2{
    background-color: #BDBCF4;
    width:20%;
    max-width:100px;
}

当第二个块不再适合容器而不是缩小时，第二个块下降的内联块：http://jsfiddle.net/dEEW5/5/

body{font-size:0}
div{
    height: 100px;
    display:inline-block;
    font-size:16px;
}
.color1{
    background-color: #6AC1FF;
    width: 100%;
    max-width:400px;
}
.color2{
    background-color: #BDBCF4;
    width:100%;
    max-width:100px;
}

【讨论】：

【解决方案2】：

我开始使用 flex，我认为这可能是我自己问题的一个很好的答案。我添加了一个带有display: flex 的容器并将每个div 设置为flex-grow。

Example

HTML

<div class="cont">
  <div class="color1">
      Some Text
  </div>
  <div class="color2">
      Bla
  </div>
  <div style="clear: both;">
</div>

CSS

div{
    height: 100px;
}
.cont{
     display: flex;
}
.color1{
    background-color: #6AC1FF;
    flex-grow: 4;
    max-width: 400px;
}
.color2{
    background-color: #BDBCF4;
    flex-grow: 1;
    max-width: 100px;
}

【讨论】：

【解决方案3】：

max-width: 400px 消失了，允许 div 扩展到那个，你应该将它与 min-width: (value); 结合起来

【讨论】：

【解决方案4】：

浮动时，您的 div 没有指定宽度；因此它们默认为内容的宽度（因此不是 400px/100px 宽）。

【讨论】：

【解决方案5】：

为您的最大视图使用以 px 为单位的特定宽度，然后设置“最大宽度：100%”。

例如

 div{
    height: 100px;
    display:block;
    float:left;
}
.color1{
    background-color: #6AC1FF;
    width: 400px;
    max-width:100%;
}
.color2{
    background-color: #BDBCF4;
    width: 100px;
    max-width:100%;
}

对于我的网站，一旦屏幕尺寸太小而无法并排显示，我很高兴两个 div 都以 100% 显示。但是，如果您想要响应能力的另一个步骤，您可以添加一个额外的@media 查询以在它们达到 100% 宽度之前选择一个中间步骤。

【讨论】：