1. Grail layout
Main: floating + margin left + relative positioning
- Write a large container containing middle,left and right. Put the middle in front
- The three containers below the container float and write the height of 200px
- Write 100% for the middle width. At this time, left and right are squeezed into the second line. Set the width of left and right to 200px
- Set margin left for left to - 100%. At this time, left returns to the left of the first line and right returns to the left of the second line
- Set the margin right of right to - 200px, and right returns to the right of the first line
- Because at this time, left and right will hold down the middle
- Set padding: 0 200px for the container to leave space for left and right
- After setting the relative positioning for left and right, the left value of the left module is set to - 200px, returning to the space left for it. Similarly, the right value of the right block is set to - 200px
- At this time, because the container is floating, its height will be 0. Add overflow:hidden to make it BFC and display the normal height
- At this time, if the page shrinks very small, there will be a display confusion problem. Add the Min width attribute to the container, or use the double flying swallow layout to solve it
Why add padding in the container instead of middle?
Because the width of the middle is set to 100%, setting padding also takes up the full screen width. Setting a large container can leave a position for left and right
<style>
.container {
overflow: hidden;
padding: 0 200px;
min-width: 400px;
}
.middle {
background-color: yellow;
width: 100%;
}
.left {
background-color: blue;
width: 200px;
margin-left: -100%;
left: -200px;
}
.right {
background-color: pink;
width: 200px;
margin-left: -200px;
right: -200px;
}
.container > div {
float: left;
height: 200px;
position: relative;
}
</style>
<body>
<div class="container">
<div class="middle">
1265416531635
</div>
<div class="left">
123
</div>
<div class="right">
456
</div>
</div>
</body>
2. Layout of shuangfeiyan
Main: floating (without relative positioning)
-
Three containers are set, including middle, left and right modules. The middle module is placed in the front and another middle is nested in the middle_ The main function of the in module is to inherit 100% of the middle width, and the modules inside use margin or padding to reserve space for left and right, which solves the problem that left and right occupy the position of intermediate elements, and there is no need for relative positioning.
-
Let middle, left and right float to the left, and set the width of left and right to 200px, and the width of middle is 100%. At this time, left and right are supported to the second line. Then set the height for the three.
-
Let middle_in inherits the height of 100%, the margin left of the left module is set to - 100%, and the margin left of the right module is set to - 200px. At this time, they are already on the left and right of the first row and press the middle module
-
Is middle_in set padding or margin to solve the problem of being pressed
-
Similarly, set the container to BFC
<style> .container { overflow: hidden; } .container > div { float: left; height: 200px; } .middle { background-color: yellow; width: 100%; } .middle_in { background-color: red; height: 100%; margin: 0 200px; /* padding: 0 200px; */ } .left { background-color: blue; width: 200px; margin-left: -100%; } .right { background-color: pink; width: 200px; margin-left: -200px; } </style> <body> <div class="container"> <div class="middle"> <div class="middle_in"> 1265416531635 </div> </div> <div class="left"> 123 </div> <div class="right"> 456 </div> </div> </body>
3.flex layout implementation
The flex growth attribute defines the magnification of the item. The default is 0, that is, if there is any remaining space, it will not be enlarged.
The flex shrink attribute defines the reduction scale of the item, which is 1 by default, that is, if there is insufficient space, the item will be reduced.
The lex basis attribute defines the main size occupied by the project before allocating extra space. Based on this attribute, the browser calculates whether the spindle has excess space. Its default value is auto, which is the original size of the project.
flex Is a non negative number n: The number is flex-grow The value of, flex: n；= flex-grow: n； flex-shrink: 1； flex-basis: 0%；
Set a large container flexc, including center, left and right. Set the height of the large container, and the child elements will inherit the height automatically
Set display:flex for flexc, and fix the height of left and right by 200px
Set flex:1 for the center, where the default value of flex base is 0%, but the value of flex grow is 1, which will automatically expand the remaining space
Set order sorting for three modules
<style>
.flexc {
display: flex;
height: 200px;
}
.centerc {
background-color: yellow;
flex: 1;
order: 1;
}
.leftc {
background-color: blue;
width: 200px;
order: 0;
}
.rightc {
background-color: pink;
width: 200px;
order: 2;
}
</style>
<body>
<!-- Elastic layout -->
<div class="flexc">
<div class="centerc">
123
</div>
<div class="leftc">
456
</div>
<div class="rightc">
789
</div>
</div>
</body>