CSS Solution Photo Album Horizontal Perfect Arrangement Example

Source: Internet
Author: User

For a long time did not study CSS, all day with a variety of frameworks do not need to write their own, and recently to do a photo album page, encountered the first problem is how to arrange.

Give the design draft first and then say how the style is written

Analysis, there is a container, the container has padding, each row of each item and there is margin, the first thought is this

. container {

padding:10px

}

.    Container. Item {

float:left;

width:24%;

margin-left:1%;

border:1px solid #CCC;

}

However, this situation can create two problems, First is the first item itself Margin-left Plus. Container's padding will cause the left margin to be larger than the top and bottom, and will cause the item and item between the vertical spacing and horizontal spacing can not be controlled to the same size.
So consider using the Calc attribute

.container {    padding: 5px;

}   container .item {    width: 25%;

    position: relative;

    float: left; }  /*  This image is simply to get the width of the high, actually invisible  */. container .item > img {   &

nbsp;opacity: 0;     width: 100%;   }    /*  This is the container in each item .container 

. item .body {    border: 1px solid  #CCC;

    width: calc (100% - 10px);

    height: calc (100% - 10px);

    margin: auto;

    left: 0;

    top: 0;

    bottom: 0;

    right: 0; }

If the above code to use SASS to achieve, it is easier, this implementation is equivalent to virtually every item occupied by the size is 25%, but inside the body are up and down around the 5px margin. The margin between item and item is actually the right spacing of each item plus the left margin of the right item, with the bottom margin of each item plus the top margin of item below it.

This implementation has several benefits:


1, up and down are the same margin
2, Pure style
3, the picture proportion will not be destroyed

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.