CSS布局網格容器中心

Question

我嘗試根據窗口寬度（比容器更新寬度）使用布局響應，使用窗口寬度100%除網格寬度比對齊中心margin: 0 auto寬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;
}

結果可以在這里看到： 演示在這里

希望有幫助！