Question

我尝试根据窗口宽度进行布局响应，而不是使用容器更新宽度使用窗口宽度100%划分网格宽度100px而不是对齐中心margin: 0 auto。但是当我使用css clac它不起作用100%/100px时，如何解决它是否只能使用没有js的css来实现它

http://jsfiddle.net/3pvk0ooh/

<div class="container">    
    <div class="grid">grid</div>
    <div class="grid">grid</div>
    <div class="grid">grid</div>
</div>

.container {
    background: red;
    margin: 0 auto;
    width: calc(100%/100px);
}
.grid {
    float: left;
    width: 100px;
    height: 100px;
    background-color: green;
}

Answer 1

似乎calc()中的第一个值是百分比，第二个值是数字，这意味着您不能按像素划分。即calc(100% / 7)是正确的，calc(100% / 7px)不正确。

然而，根据这个网站，这不会解决您的问题：https://css-tricks.com/a-couple-of-use-cases-for-calc/ - 数学运算符周围必须有空格。

说明：

司。右侧必须是<number>。

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/calc

请注意calc功能的向后兼容性：http://caniuse.com/#feat=calc

Answer 2

像这样更新你的CSS：

.container {
    background: red;
    margin: 0 auto;
    width: calc(100%/100px);
    display: table;
    position:relative;
    margin: 0 auto;
}
.grid {
    float: left;
    width: 100px;
    height: 100px;
    background-color: green;
    float : left;
    margin: 0 auto;
    position: relative;
    text-align:left;
}

以及您可以在此处看到的结果：Demo here

希望有所帮助！

css布局网格容器中心

2 个答案: