Home > Developer > Web Develop
<!DOCTYPE HTML> <HTML> <Head> <MetaCharSet= "Utf-8"> <style>. Parent{Height:500px;Border:1px solid #222;Display:Flex;/*set as a telescopic container*/Flex-flow:Row;/*Scaling Project Line arrangement*/ }. Stable{width:200px;/*Fixed Width*/Border:1px solid #ccc;margin:20px; }. Change{Flex:1;/*this is set to 1, filled with the remaining space*/Border:1px solid #ff4400;margin:20px; } </style> </Head> <Body> <Divclass= "Parent"> <Divclass= "stable">Stable Fixed width 200px</Div> <Divclass= "Change">Changeable variable width</Div> </Div> </Body> </HTML>
Attached: traditional mode (implemented with float float)
<!DOCTYPE HTML><HTMLLang= "en"><Head><MetaCharSet= "UTF-8"><title>Document</title><style>. Parent{Height:500px;Border:1px solid #222; }. Stable{float: Left;Height:460px;width:200px;Border:1px solid #ccc;margin:20px; }. Change{Height:460px;Border:1px solid #ff4400;margin:20px 20px 20px 260px; }</style></Head><Body> <Divclass= "Parent"> <Divclass= "stable">Stable Fixed width 200px</Div> <Divclass= "Change">Changeable variable width</Div> </Div></Body></HTML>
Use CSS3 's Flex box model for two-column layouts (left fixed width, right adaptive width)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
