Home > Developer > Web Develop
A company interview: the width of the green area is 100%, which has three rectangles, the width of the first rectangle is 200px, the second and third rectangles are equal in width. Use the features in CSS3 to implement their layout.
The CSS3 feature to be used here Box-flex
Box-flex: property specifies whether the child elements of the box can scale their dimensions. a retractable element can be abbreviated or enlarged as the box shrinks or expands . As long as there is extra space in the box, the expandable elements expand to fill the space.
In addition, the flexible line flexibility of an element is relative, for example, a child element with a box-flex of 2 is twice as much as a child of Box-flex 1.
Ideas:
1. Define the following HTML:
<Body><Divclass= "box"><Divclass= "Item">Column1</Div><Divclass= "Item">Column2</Div><Divclass= "Item">Column3</Div></Div></Body>
2. Set the fixed width to the column1, box-flex:0 (for fixed width, not to participate in the adaptive width) width:200px;
3. Set the box-flex:1 to Column2 Column3 (according to the proportional 1 adaptive width);
The CSS code is as follows:
<Head> <styletype= "Text/css">. Box{Background-color:Green;Display:-moz-box;Display:-webkit-box;Display:Box;Height:50px;Line-height:30px;text-indent:10px; }. Item{Box-flex:1;-moz-box-flex:1;-webkit-box-flex:1;margin:10px;background:#fff;text-align:Center}. Item:first-child{Box-flex:0;-moz-box-flex:0;-webkit-box-flex:0;width:200px;background:#fff;margin:10px;text-align: Left; }. Item:nth-child (2){margin:10px 0} </style></Head>
See what it looks for:
CSS3: Three rectangles, a width of 200px, the remaining wide equal and adaptive full-paved
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
