CSS layout of the product word layout

Recently, some students interviewed were asked about the layout of the product word. Although I think this layout is really ugly, it should not be used, but since someone asked, I still try to write the word layout. It's actually very simple.

First look at the effect:

The first type:

The second type:

The first type:

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

(1) Three blocks of aspect are determined;

(2) above that block with margin:0 Auto;

(3) The following two block with float or inline-block do not change;

(4) Adjust the position with margin to center them.

The inline method code is as follows:

<! Doctype html>
Here first use margin-left:50%, let the following two block left to the middle position. And then to the lower right corner of the block with Margin-left, the value is negative twice times the width. You can move it to the lower left corner. So the second div is lower right, the third one is lower left and needs to be changed.
There is also a small trick, using Inline-block will have a small gap, you can use to remove the spacing between inline-block elements of n methods to solve.
Float mode:
<! Doctype html>
and inline-block the same way, we will not repeat.
There are full-screen product word layout, it is more simple, the basic idea is the above div width 100%, the following two div width 50%, and then use float or inline so that it does not change the line.
Here's a way to put it:
<! Doctype html>

CSS layout of the product word layout