Div CSS creates adaptive width layout (liquid layout) (transfer)_html/css_WEB-ITnose

To make a long story short, use DIV CSS to make liquid layout (width adaptive), specifically using the "negative value outer patch" method (negative margins).
Now let’s make a three-column liquid layout

First the code for Body and outer frame:

body{margin:0;padding:0px;text -align:center;}
#wrap{margin:0 auto;text-align:left;}

The codes for the three columns are as follows:

/*Left column, fixed width*/
.wrap_l{float:left;background:#FF0000;margin-right:-150px;width:150px;border:1px solid #333;}
/*Middle column, adaptive width*/
. wrap_m{width:auto;background:#00FF00;margin:0 140px 0 150px;border:1px solid #000;}
/*Right column, fixed width*/
.wrap_r{float:right;background: #0000FF;margin-left:-140px;width:140px;border:1px solid #999;}

Here, the framework is completed, the following is the complete code:

This is the left part

This This is the left part

This is the left part

This is the right part

This is the right part

This is the right part

This is the middle part

The left side of the middle

The right side of the middle

This Is the middle part