CSS Layout Character Layout_html/css_WEB-ITnose-HTML Tutorial-php.cn

CSS Layout Character Layout_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:38:40

Original

1143 people have browsed it

Recently, a classmate was asked in an interview about the layout of pin characters. Although I think this layout is indeed ugly and should not be used, but since someone asked, I still tried to write the word layout myself. It's actually very simple.

Look at the effect first:

First type:

Second type:

First Type:

In fact, the implementation method is very simple, the basic idea:

(1) The height and width of the three blocks are determined;

(2) Use margin: 0 for the above block auto; centered;

(3) Use float or inline-block in the bottom two blocks without wrapping;

(4) Use margin to adjust the position so that they are centered.

The inline method code is as follows:

<!DOCTYPE html><html>    <head lang="en">        <meta charset="UTF-8">        <title></title>    </head>    <style> *{            margin: 0;             border: 0; }        .d1, .d2, .d3{            height: 100px;             width: 100px;             background-color: #FF0000;             border: solid 1px #000000; }        .d1{            margin: 0 auto; }        .d3{            display: inline-block;             margin-left: -200px; }        .d2{            display: inline-block;             margin-left: 50%; }    </style>    <body>        <div class="d1">上</div><!--        --><div class="d2">右</div><!--        --><div class="d3">左</div>    </body></html>

Copy after login

Here first use margin-left: 50%, so that the left side of the following two blocks is in the middle. Then use margin-left on the lower right corner, the value is negative twice the width. Just move it to the lower left corner. Therefore, the second div is on the lower right, and the third div is on the lower left, and needs to be changed.

There is also a little trick. There will be small gaps when using inline-block. You can use N methods to remove the spacing between inline-block elements to solve it.

float method:

<!DOCTYPE html><html>    <head lang="en">        <meta charset="UTF-8">        <title></title>    </head>    <style> *{            margin: 0; border: 0; }        .d1, .d2, .d3{            height: 100px;             width: 100px;             background-color: #FF0000;             border: solid 1px #000000; }        .d1{            margin: 0 auto; }        .d3{            float: left;             margin-left: -200px; }        .d2{            float: left;             margin-left: 50%; }    </style>    <body>        <div class="d1">上</div>        <div class="d2">右</div>        <div class="d3">左</div>    </body></html>

Copy after login

is similar to the inline-block method, so I won’t go into details.

There is also a full-screen word layout, which is even simpler. The basic idea is that the top div is 100% wide, and the two bottom divs are 50% wide respectively, and then use float or inline to prevent it from wrapping.

A method is posted here:

<!DOCTYPE html><html>    <head lang="en">        <meta charset="UTF-8">        <title></title>    </head>    <style> *{            margin: 0;             border: 0; }        .d1, .d2, .d3{            height: 300px; }        .d1{            width: 100%;             height: 300px;             background-color: #FF0000; }        .d3{            float: left;             width: 50%;             background-color: #0099FF; }        .d2{            float: left;             width: 50%;             background-color: #4eff00; }    </style>    <body>        <div class="d1">上</div>        <div class="d2">右</div>        <div class="d3">左</div>    </body></html>

Copy after login