CSS implementation left div adaptive width, right width fit to left

Use BFC: the right box triggers the BFC so that it does not overlap the floating box area, so the width is recalculated.

1 <style>2 . Box{width:900px;margin:0 Auto;Background-color:#eee; }3 . Left{Min-width:200px;float: Left;Background-color:Yellow;Height:60px;}4 . BFC{Background-color:Green; }5 . Right{Display:Inline-block;Margin-left:20px;Background-color:Red;Height:60px;}6 </style>7 <Divclass= "box">8     <Divclass= "Left">9 I'm a self-adapting width box, min-width:200px.Ten     </Div> One     <Divclass= "BFC"> A         <Divclass= "Right"> - I'm a self-adapting width, covered with the rest of the width -         </Div> the     </Div> - </Div>

Effect

Add:

BFC Translation is a block-level formatting context, similar to Haslayout, but Haslayout is a proprietary property of an older version of IE, which represents the elements themselves that organize and calculate their own content. BFC is equivalent to a separate rendering unit, and the inner and outer elements do not affect each other. I Overflow:hidden trigger BFC here, using a feature of the BFC layout, where the BFC area does not overlap with the floating box. BFC has many features, there are many trigger ways, interested students can Google in-depth understanding of the next

CSS implementation left div adaptive width, right width fit to left