About CSS common 4 kinds of left fixed, right adaptive layout

In our development or interview often hear the interviewer ask this question, then how the small partners to answer it.

HTML code:

<div class= ' aside ' ></div>

<div class= ' content ' ></div>

One, set by margin:

CSS code:

. aside {width:210 px; height:400 px; background-color:forestgreen; float:left;}. content {height:400 px; margin-left:210 px; background-color:orange;
}

Two: By triggering the BTC implementation

CSS code:

. aside{width:200px; height:200px; background-color:red; float:left;} content{Overflow:hidden; height:200px; back Ground-color:blue

Three: Through the Flex layout:

This is not described in detail here, see Flex Layout Tutorial for flex layouts in Nanyi: Flex layout Tutorial

Four: Realized through Display:table-cell

CSS code:

aside {width:200 px; height:200 px; float:left; background-color:red;}. content {Display:table-cell; width:3000 px; height:200 px; background-color:blue;}