CSS method to implement horizontal column layout-CSS Tutorial-php.cn

CSS method to implement horizontal column layout

巴扎黑

Release： 2017-08-05 13:07:49

Original

1937 people have browsed it

1. How to use float to implement horizontal column layout

As shown below: p1 and p2 can choose to float 50% to the left or right to display on the same line

##Analysis:

1. The left and right margins of the first image and the last image in the first row are 10px, and the left and right margins of the middle image are 5px. The layout is as follows:

2. In the second row, only the middle image has a maximum margin of 5px; the layout is as follows:

 <section class="active_p1">
        <p>
            <img id="active_p11" src="">
        </p>
        <p>
            <img id="active_p12" src="">
        </p>
        <p>
            <img id="active_p13" src="">
        </p>
    </section>

Copy after login

.active_p1 p {
    float: left;
    width: 33.33%;
    box-sizing: border-box;
}
 .active_p1 p:nth-child(1) {
    padding-left: 10px;
}
 .active_p1 p:nth-child(3) {
    padding-right: 10px;
}
 .active_p1 p:nth-child(2) {
    padding: 0 5px;
}

Copy after login

<section class="active_p2">
        <p>
            <img id="active_p21" src="" onclick="imgClick(this)">
        </p>
        <p>
            <img id="active_p22" src="" onclick="imgClick(this)">
        </p>
        <p>
            <img id="active_p23" src="" onclick="imgClick(this)">
        </p>
    </section>

Copy after login

.active_p2 p {
    width: 33.33%;
    float: left;
    box-sizing: border-box;
}
 .active_p2 p:nth-child(2) {
    padding: 0px 5px;
}

Copy after login

Note: If there is no other style after using box-sizing: border-box, all the blocks will be attached together without any spacing in the middle.

2. Use display:inline-block

display:inline-block is mostly used for line block conversion. It is not recommended to use this attribute. Column layout. Because inline-block cannot completely replace float

The layout in the red box is the most classic layout using display:inline-block.

<header id="consume_h">
       <span>已过期为消费不退款</span>
        <span>免预约</span></header>

Copy after login

.consume_h  span {
    display: inline-block;
}
 .consume_h  span:before {
    content: "\f120";
    display: inline-block;
    margin-right: 5px;
    margin-left: 10px;
    font-family: "Ionicons";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

Copy after login

Pseudo classes are used here. The definition and use of pseudo classes will not be introduced here.

There is also a classic layout:

This kind The layout is generally:

<p>
            <img src="" alt="">
            <p>
    测试勿拍            </p> </p>

Copy after login

Using positioning position:absolute is often used when the left side is fixed and the right side is adaptive.

Relative positioning of p

Absolute positioning of img
Relative positioning of p
3. Use flexible box to achieve a truly fluid layout

The above is the detailed content of CSS method to implement horizontal column layout. For more information, please follow other related articles on the PHP Chinese website!