我正在尝试创建一个响应式布局,如果屏幕大小允许,则两个框彼此相邻,如果没有,则它们彼此相邻。如果盒子彼此相对,我希望他们以他们的父母为中心。我已经建立了一个jsfiddle来演示这个问题:
http://jsfiddle.net/leongersen/KsU23/
width: 50%; min-width: 350px; max-width: 100%;
尝试将“结果”窗格调整到350px以下。元素将与父母重叠。
我的问题:
为什么指定的最大宽度不能得到尊重,即使是在最小宽度之后呢?
我当然可以使用媒体查询,但我想知道为什么会发生这种情况。
解决方法
因为
CSS standards:
The following algorithm describes how the two properties influence the
used value of the ‘width’ property:
- The tentative used width is calculated (without ‘min-width’ and
‘max-width’) following the rules under “Calculating widths and
margins” above.- 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’.- 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’.
像这样的最小宽度总是“赢”。在一个特定的CSS规则中,无论如何,无论如何,所有的值都以原子方式应用。优先级只有当不同的规则全部适用于同一个元素时才会发生,即使在考虑文件顺序之前,它也是基于特定的。