在css中制作了一个网格，但它不起作用

Question

我正在尝试在css中创建一个网格，我制作的代码几乎与我在网上找到的所有代码相似。如果我把这些类放在我的HTML中，它并不会出现。 跟随css有什么不对？ 显然，如果我在这里运行代码片段它可以工作，但如果我在chrome或edge

中测试页面则不行

.row:after{
    content: "";
    clear: both;
    display: inline;
}
[class*='col-']{
    padding: 15px;
    float: left;
}

.col-1{width: 8.33%};
.col-2{width: 16.66%};
.col-3{width: 25%};
.col-4{width: 33.3%};
.col-5{width: 41.66%};
.col-6{width: 50%};
.col-7{width: 58.33%};
.col-8{width: 66.66%};
.col-9{width: 75%};
.col-10{width: 83.33%};
.col-11{width: 91.66%};
.col-12{width: 100%};

 <div class="row">
            <div class="col-4">
                <p>some text
                </p>
            </div>
            <div class="col-4">
                <p>some text</p>
            </div>
            <div class="col-4">
                <p>some text</p>
            </div>
        </div>

抱歉，首先是代码错误

Answer 1

you ar not adding both css and html for single file. Please take update jsfiddle

https://jsfiddle.net/5ga9j53r/