HTML CSS实现百分比布局

使用flex布局的justify-content:space-between时，最后一行如果数量不够，无法做到对齐效果，而且有时候为了兼容更低版本IE，不能使用flex。这种情况下，使用百分比布局无疑是一种很好的选择。
但是这种方式实现的是间隔固定、item宽度可变。有时候也会遇到item宽度固定，间距可变的情况，但是这种方式我还不知道怎么可以用百分比来实现，如果有会的朋友，可以在评论区留言~感激不尽

HTML代码

<!-- 父级元素 -->
<div class="wrapper">
    <!-- 内容区 -->
    <div class="content">
        <div class="item-wrapper">
            <!-- 实际元素item -->
            <div class="item"></div>
        </div>
        <div class="item-wrapper">
            <div class="item"></div>
        </div>
        <div class="item-wrapper">
            <div class="item"></div>
        </div>
        <div class="item-wrapper">
            <div class="item"></div>
        </div>
        <div class="item-wrapper">
            <div class="item"></div>
        </div>
    </div>
</div>

CSS代码

.wrapper{
    width: 100%;
    margin: 0 auto;
    height: 300px;
    font-size: 0;
}
.content{
    margin: 0 -10px;
    /* -10px 为实际间隔的一半 */
}
.item-wrapper{
    display: inline-block;
    box-sizing: border-box;
    width: 25%;
    padding: 10px;
    /* 10px为实际间隔的一半，此处主要用padding-left和padding-right，top和bottom为上下间距 */
}
.item{
    background-color: #cccccc;
    height: 80px;
}

实现效果

媒体查询

结合媒体查询，还可以实现响应式布局
在上边css下再加一部分

@media screen and (max-width: 780px){
    .item-wrapper{
        width: 33.33%;
    }
}

效果展示

当屏幕宽度小于所设定的值（780px）后，item的宽度将变为33.33%。
百分比布局结合媒体查询，可以实现更多效果，有兴趣的朋友可以自己尝试一下