Question

我正在尝试创建一个响应式布局，如果屏幕大小允许，则两个框彼此相邻，如果没有，则将它们放在彼此之下。如果盒子在彼此之下，我希望它们以父母为中心。我已经设置了一个jsfiddle来演示这个问题：

width: 50%;
min-width: 350px;
max-width: 100%;

尝试将“结果”窗格调整为350px以下。元素将与其父元素重叠。

我的问题：

为什么指定的最大宽度不符合，即使它出现在最小宽度之后？

Answer 1

由于CSS standards：

以下算法描述了两个属性如何影响   使用'width'属性的值：


计算暂定使用的宽度（没有'min-width'和   'max-width'）遵循“计算宽度和宽度”下的规则   利润“以上。

如果暂定使用的宽度大于   'max-width'，上面的规则再次应用，但这次使用   “max-width”的计算值作为“width”的计算值。

如果生成的宽度小于'min-width'，则为上述规则   再次应用，但这次使用'min-width'的值作为   'width'的计算值。

因为这样的最小宽度总是'赢'。在特定的CSS规则中，无论如何都没有优先权，所有值都以原子方式应用。只有当不同的规则都适用于同一个元素时才会出现优先级，即使这样，它也会在考虑文件顺序之前首先基于特异性。

Answer 2

我知道，我来晚了... 但是一个确切的解决方案可能是这样：

p {
    display: inline-block;
    font-size: 15px;
    text-align: left;
    width: 50%;
    border: 1px solid blue;
    min-width: 350px;
}
@media (max-width: 700px) {
  p {
    width:100%;
    display:block;
  }
}

为什么max-width不覆盖min-width？

2 个答案: