Home > Developer > Web Develop
Before studying the vertical and horizontal layout of the Div, let's look at how the similar effects of Group (Canvas) in Flex are implemented in the Div.
Keyword: position
Learned the previous Float:left set in the parent container does not have the effect of the lesson, this position:absolute decisive first set on the child element
<Body> <Divclass= "Redrect"> <Divclass= "Bluerect"style= "position:absolute;left:20px;top:20px;width:50px">Sub Div 0</Div> </Div> </Body>
The amount ... 2 questions, the Top,left 20px is relative to the upper left corner of the window, not the red parent container, and the red parent container is not open with the quilt element. So again query W3school (EH!) Readers should go to W3school to learn ... ）
An element box set to absolute positioning is completely removed from the document flow and is positioned relative to its containing block, which may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element had not existed. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow.
This statement can explain what happened. Because the red parent container does not use position, the blue sub-elements refer to his nearest coordinate system root. Use of absolute causes removal from the document stream and does not open the parent container
<Body> <Divclass= "Redrect"style= "Position:absolute"> <Divclass= "Bluerect"style= "position:absolute;left:20px;top:20px;width:50px">Sub Div 0</Div> </Div> </Body>
Try adding position to the parent container so that the reference coordinate system is based on the nearest parent container, because the default top and left of absolute is 0, so it becomes a point.
In Flex, we generally set the width and height of the container to 100%, allowing the child containers to be filled freely, out of the scroll bars, and so on. Or do not set the width height, the child container to open the parent container.
For example we will, SUB2 group's height is set to 100%, it will actually occupy 200-50 = 150 of the final height
<S:vgroupwidth= "100%"Height= "$"> <S:groupID= "Sub1"width= "100%"Height= " the"/> <S:groupID= "Sub2"width= "100%"Height= "100%"/></S:vgroup>
However, this logic does not work in the Div, and the child element's height of 100% is taken into account by the parent container, and is not subtracted before occupying the parent container. So the sub2 height will also become 200, resulting in exceeding the parent container
<Body> <Divclass= "Redrect"style= "width:200px;height:200px"> <Divclass= "Bluerect"style= "width:200px;height:50px">Sub Div 0</Div> <Divclass= "Bluerect"style= "width:200px;height:100%">Sub Div 1</Div> </Div> </Body>
What to do, this day to brake the div. In combination with previously mastered skills, we can use position to achieve
<Body> <Divclass= "Redrect"style= "position:absolute;width:200px;height:200px"> <Divclass= "Bluerect"style= "width:200px;height:50px">Sub Div 0</Div> <Divclass= "Bluerect"style= "position:absolute;top:50px;left:0px;right:0px;bottom:0px">Sub Div 1</Div> </Div> </Body>
Horizontal layout is the same thing
<Body> <Divclass= "Redrect"style= "position:absolute;width:200px;height:200px"> <Divclass= "Bluerect"style= "float:left;width:50px;height:100%">Sub Div 0</Div> <Divclass= "Bluerect"style= "float:left;position:absolute;top:0px;left:50px;right:0px;bottom:0px">Sub Div 1</Div> <Divstyle= "Clear:both"/> </Div> </Body>
We look at the effect, but also good. Although there are 1 pixels of small deviations, but we do not care about these details (estimated position default static and absolute deviation, and later).
This is a very important skill, I hope you can master the Flex programmer, will be able to start work on the basic.
Flex transforms HTML learning essays about the div layout for HTML pages (bottom)
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
