I'm trying to create a responsive layout in which two boxes sit next to each other if the screen size allows it, and have them below each other if it doesn't. If the boxes are below each other, I'd like them to be centred to their parent. I've set up a jsfiddle to demonstrate the problem:
我正在尝试创建一个响应式布局，如果屏幕大小允许，两个框彼此相邻，如果没有，则将它们放在彼此之下。如果盒子在彼此之下，我希望它们与父母居中。我已经设置了一个jsfiddle来演示这个问题：
http://jsfiddle.net/leongersen/KsU23/
http://jsfiddle.net/leongersen/KsU23/
width: 50%;
min-width: 350px;
max-width: 100%;
Try resizing the 'result' pane to below 350px. The elements will overlap their parent.
尝试将“结果”窗格调整为350px以下。元素将与其父元素重叠。
My question:
我的问题：
Why isn't the specified max-width honoured, even though it comes after the min-width?
为什么指定的最大宽度不符合，即使它在最小宽度之后？
1 个解决方案
#1
33
Because of the CSS standards:
由于CSS标准：
The following algorithm describes how the two properties influence the used value of the 'width' property:
以下算法描述了这两个属性如何影响'width'属性的使用值：
- The tentative used width is calculated (without 'min-width' and 'max-width') following the rules under "Calculating widths and margins" above.
- 根据上面“计算宽度和边距”下的规则计算暂定使用的宽度（没有'min-width'和'max-width'）。
- If the tentative used width is greater than 'max-width', the rules above are applied again, but this time using the computed value of 'max-width' as the computed value for 'width'.
- 如果暂定使用的宽度大于'max-width'，则再次应用上述规则，但这次使用'max-width'的计算值作为'width'的计算值。
- If the resulting width is smaller than 'min-width', the rules above are applied again, but this time using the value of 'min-width' as the computed value for 'width'.
- 如果生成的宽度小于'min-width'，则再次应用上述规则，但这次使用'min-width'的值作为'width'的计算值。
As such min-width always 'wins'. Within a specific CSS rule there's no precedence anyway, all values are applied atomically. Precedence only occurs when different rules all apply to the same element, and even then it is based on specificity first before file order is considered.
因此，最小宽度总是“赢”。在特定的CSS规则中，无论如何都没有优先权，所有值都以原子方式应用。只有当不同的规则都适用于同一个元素时才会出现优先级，即使这样，它也会在考虑文件顺序之前首先基于特异性。
#1
33
Because of the CSS standards:
由于CSS标准：
The following algorithm describes how the two properties influence the used value of the 'width' property:
以下算法描述了这两个属性如何影响'width'属性的使用值：
- The tentative used width is calculated (without 'min-width' and 'max-width') following the rules under "Calculating widths and margins" above.
- 根据上面“计算宽度和边距”下的规则计算暂定使用的宽度（没有'min-width'和'max-width'）。
- If the tentative used width is greater than 'max-width', the rules above are applied again, but this time using the computed value of 'max-width' as the computed value for 'width'.
- 如果暂定使用的宽度大于'max-width'，则再次应用上述规则，但这次使用'max-width'的计算值作为'width'的计算值。
- If the resulting width is smaller than 'min-width', the rules above are applied again, but this time using the value of 'min-width' as the computed value for 'width'.
- 如果生成的宽度小于'min-width'，则再次应用上述规则，但这次使用'min-width'的值作为'width'的计算值。
As such min-width always 'wins'. Within a specific CSS rule there's no precedence anyway, all values are applied atomically. Precedence only occurs when different rules all apply to the same element, and even then it is based on specificity first before file order is considered.
因此，最小宽度总是“赢”。在特定的CSS规则中，无论如何都没有优先权，所有值都以原子方式应用。只有当不同的规则都适用于同一个元素时才会出现优先级，即使这样，它也会在考虑文件顺序之前首先基于特异性。