هنوز چند بایت مونده که پیدا کنم...

5 ستون یکسان در یک سطر برای تمام ویوها (responsive)

Five equal columns

خیلی راحت، 5 ستون یکسان برای همه اندازه ها درست کنین...

// css
.div-wrapper {
    overflow: hidden;   
    color: #ffffff;
    text-align: center;
    margin: auto;
    background-color: #2d2d2d;
}

.div-wrapper > .div-child {
    padding: 1em;    
}

@media screen and (min-width: 44em) {
    .div-wrapper > .div-child {
        float: left;
        width: 50%;
    }

    .div-wrapper > .div-child:nth-child(odd) {
        clear: left;
    }
}

@media screen and (min-width: 50em) {
    .div-wrapper > .div-child {
        float: left;
        width: 33.3333333%;
    }

    .div-wrapper > .div-child:nth-child(3n+1) {
        clear: left;
    }

    .div-wrapper > .div-child:nth-child(odd) {
        clear: none;
    }
}

@media screen and (min-width: 70em) {
    .div-wrapper > .div-child {
        width: 20%;
    }

    .div-wrapper > .div-child:nth-child(odd), .div-wrapper > .div-child:nth-child(3n+1) {
        clear: none;
    }
}

// html
<div class="div-wrapper">
     <div class="div-child">Column 1</div>
     <div class="div-child">Column 2</div>
     <div class="div-child">Column 3</div>
     <div class="div-child">Column 4</div>
     <div class="div-child">Column 5</div>
</div>
نویسنده : فاطمه حسین پور
پنجشنبه 4 شهریور 1395
+ 40 -

خوشحال میشیم نظرتُ بدونیم