css - 带有百分比 + 静态值的 css

Question

我知道以下内容是错误的，但是生成类似内容的更简单方法是什么？

 .classhere{
 width: 50px + 10%
 }

所以这里的 div 有一个 50px 宽度 +10% 的最小值（假设父级是 100 像素）所以 55 像素，当父级全屏时，例如 1800 像素，.classhere 的宽度为 50 + 180 像素。

更新：

欢迎使用 javascript、jQuery 和其他解决方案

Answer 1

您将需要使用 javascript 来获取屏幕的宽度，然后设置宽度。http://api.jquery.com/width/

Answer 2

你可以像下面那样做。

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent{
    width:100px;
    height:100px;
    background-color:blue;
}

.child{
    background-color:green;
}

jQuery

$(document).ready(function(){
    $(".child").width(50+($(".parent").width()*0.1));
    $(".child").height(50);
});

如果你想看它的演示，jsfiddle 在这里

Answer 3

虽然它在 Android 或 Opera 中不受支持，但 CSS calc() 是为这类东西制作的。

参考此浏览器兼容性：http ://caniuse.com/calc

.classhere{
    width: -webkit-calc(50px + 10%);
    width: -moz-calc(50px + 10%);
    width: calc(50px + 10%);
}