HTML CSS实现百分比布局

HTML CSS实现百分比布局

    • HTML代码
    • CSS代码
    • 实现效果
    • 媒体查询
      • 效果展示

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

HTML代码


<div class="wrapper">
    
    <div class="content">
        <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 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%。
百分比布局结合媒体查询,可以实现更多效果,有兴趣的朋友可以自己尝试一下

你可能感兴趣的:(HTML CSS实现百分比布局)