CSS宽度100％或最大宽度（以像素为单位） [英] CSS width 100% OR max-width in pixels

问题描述

如何创建宽度的CSS规则

How one could create a CSS rule for width which

• 默认使用100％宽度

• Uses 100% width by default

如果100％宽度超过某个像素宽度（假设为512像素），则宽度会下拉到此像素宽度

If 100% width exceeds certain pixel width (let's say 512 px), then the width is clamped down to this pixel width

我不知道宽度和最大宽度的关系，或者如何支持calc（）或可以表达这一点。这需要使用最新的WebKit浏览器和Firefox 4. IE8等支持不需要

I am not sure about width and max-width relations, or how calc() is supported or could express this. This would need to work with the latest WebKit browsers and Firefox 4. IE8 etc. support not needed

推荐答案

使用 max-width 。如果元素的计算（实际） width 超过 max-width ，它将被限制为最大值超越它。

That's in fact the intended use of max-width. If the computed (actual) width of an element exceeds max-width, it will be constrained to the max value instead of going beyond it. Percentage versus pixels isn't relevant.

在相同的规则中声明这样的规则（不需要 calc（） function）：

Declare both in the same rule like this (no need for the calc() function):

#somediv {
    width: 100%;
    max-width: 512px;
}

这篇关于CSS宽度100％或最大宽度（以像素为单位）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！