"CSS face question" Three div requires horizontal alignment, left and right two div width fixed to 100px, the middle of the div filled with the remaining width (at least 2 ways)

This is my interview in a company encountered problems, then did not answer!!

So see the small partners must pay attention to!!

Change the browser width to see the effect:

Right and left.

Then we'll look at the code:

First method: (floating)

<styletype= "Text/css">. Left,.right,.center{Border:1px solid;Height:100px;text-align:Center;Line-height:100px;font-size:50px;        }. Left{float: Left;width:100px;        }. Right{float: Right;width:100px;        }. Center{margin:0 100px;        }</style><Div>    <Divclass= "Left">Left</Div>    <Divclass= "Right">Right</Div>    <Divclass= "Center">In</Div></Div>

Second method: (absolute positioning)

<styletype= "Text/css">. Container{position:relative;        }. Left,.right,.center{position:Absolute;/*Increase absolute Positioning*/Top:0;Border:1px solid;Height:100px;text-align:Center;Line-height:100px;font-size:50px;        }. Left{ Left:0;width:100px;        }. Right{ Right:0;width:100px;        }. Center{width:Auto; Left:100px; Right:100px;        }</style><Divclass= "Container">    <Divclass= "Left">Left</Div>    <Divclass= "Right">Right</Div>    <Divclass= "Center">In</Div></Div>

Of course there are many ways, if you have any better way, I hope you can comment out below, we all study together

"CSS face question" Three div requires horizontal alignment, left and right two div width fixed to 100px, the middle of the div filled with the remaining width (at least 2 ways)