Two-wing layout, is the two ends fixed wide height, the middle adaptive three-column layout
First, the gray blocks on the left and right are fixed and wide, and the middle green area is wide and highly adaptive.
Mode one: Through flex flexible layout to achieve
Look at the code
HTML structure, p2 is the middle of the adaptive area ...<body> <p class= "wrap" > <p class= "P1" ></p> <p class = "P2" ></p> <p class= "P3" ></p> </p></body> ....
*{ //A simple rough solution to the browser's default style margin:0; padding:0; border:0; Box-sizing:border-box; Use Border-box, box model good calculation, mother no longer need not worry I calculate block width high}.wrap{ width:100%; height:100%; Display:flex; Use flexible layout flex-flow:row nowrap; To display the line along the spindle direction, do not wrap, so as to show 3 blocks of Justify-content:space-around; This one plus and not actually also nothing, plus go meaning is justified}[class^= ' P ']{ //To all P are added high and border style, easy to watch, otherwise all shrunk into a line of height:400px; border:1px solid #f00;}. p1,.p3{ //To the two ends of the p fixed wide width:200px; Background-color: #ccc; Flex-shrink:1; The default is 1, so do not write and nothing, write from is to express this meaning}.p2{ background-color: #0f0; flex-grow:1; This is important to allow the width of the second block to fill the remaining space}Mode two: through positioning to achieve
HTML structure does not change, see style
. wrap{ width:100%; Also achieve wide-height 100% rolling height:100%; position:relative; The parent layer adds relative positioning, allowing the child element to position the}[class^= ' P ']{height:400px relative to the parent layer ; border:1px solid #f00;}. p1,.p3{ Position:absolute; width:200px; Background-color: #ccc;}. p1{ left:0; Fixed to the left top:0 of the parent layer ;}. p3{ right:0; Fixed to the right of the parent layer top:0;}. p2{ background-color: #0f0; /* This is the key, we did not add the P2 to the middle of the width of the property, so the default is occupied by the parent width of the 100%, because the sides of the block width is fixed, so the middle of the adaptive block left and right 200px of the margin between the middle of the content area will be adaptive * / margin:0 200px; }Effect
Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!
Recommended reading:
CSS3 Transition Smooth Transition menu bar implementation
Simulates the effect of a single second-hop of the Heart
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
