Dual-flying wing Layout
Div + css is already one of the most commonly used layout methods, but there are many la S, which vary with the features, appearance, and audience of the website, the website layout will also be varied. Common Layout technologies includeDual-flying wing Layout,Waterfall Layout,Responsive LayoutIn the real front-end development, it is often impossible to use only one technology to complete the layout. Multiple technologies are often required to be combined. Today, I will show you the simplest and most direct way to understand the dual-flying wing layout.
If you think of the left, right, and right columns of the dual-wing layout as a Big Bird, you can think of main as the bird's body, and left and right as the left and right sides of the bird. The most important thing about this layout is to align the body first, and then move the left and right sides of the body to both sides of the body.Among them, we often use floating float, negative margin and relative position with the negative margin to complete various la S..
Next, let's take the first step: Set your health.
1 <! Doctype html> 2
The implementation result is as follows :(The most important thing to note is width: 100%, which is used to adapt to changes in the browser.Otherwise, the meaning of the wings will be lost .)
Next we will straighten out the wings
1 <! Doctype html> 2
The result is as follows:
As you can see above, the most important thing in the left and right sides isSet margin-left to negative margin(In fact, there is another way to do not set the negative margin) and then all are set to floating.
Finally, we only need to carry a little back, and the wings will "fly.<! Doctype html>The result is as follows:
The most important thing we can see above is to put main-content in main, so we can freely write our content in main, while main-content does not set the width, with the padding settings, we can adapt to the browser size.
The above is the simplest and most direct writing method of the dual-flying wing layout. There are no restrictions on the layout. No layout can be used for general websites, but the simplest and most basic layout method can be mastered. All the la s can be easily understood, this is what we call Yitong.
Css automatically obtains the widthYou need to put the required DIV boxes in one, and then place the DIV margin: 0 auto; in the center, the content can be evenly divided by the percentage upstairs, or set to the width, it is not difficult to set a width, or adaptive, with a dual-flying wing layout, absolutely OK
How does div layout work in the left/right column?<! DOCTYPE html>
<Html>
<Head>
<Style type = "text/css">
Div {margin: 0; padding: 0}
# Container {width: 800px; height: 500px; border: 1px solid # ccc ;}
# Container. box1 {width: pixel PX; height: 500px; float: left; background: red ;}
# Container. box2 {margin-left: 40px; width: pixel PX; height: 500px; float: left; background: green ;}
</Style>
</Head>
<Body>
<Div id = "container">
<Div class = "box1"> </div>
<Div class = "box2"> </div>
</Div>
</Body>
</Html>
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
