Web Front-end
HTML Tutorial
CSS Layout Holy Grail Layout & Double Flying Wing Layout_html/css_WEB-ITnose
CSS Layout Holy Grail Layout & Double Flying Wing Layout_html/css_WEB-ITnose
According to my understanding, in fact, the purpose of realizing the Holy Grail layout and the double flying wing layout is to fix the width of the left and right columns and adapt the middle part.
But there are still some differences in implementation here
[Holy Grail Layout]
Here, the left (200px) and right (220px) widths are fixed, the middle is adaptive, and the container part height remains consistent.
DEMO
A little explanation:
The middle part of the html code must first be placed at the front of the container. Then left, right
1.Add float:left to all three, plus position:relative (because relative positioning will be used later)
2.Middle part width: 100% occupied
3.The middle is full at this time, so you need to pull the left to the far left and use margin-left: -100%
4.At this time, the left is pulled back, but it will cover the left end of the middle content. To pull the middle content out, add padding: 0 220px 0 to the outer container 200px
5.The middle content has been pulled back, but the left has also followed, so to restore it, use relative positioning left:-200px For the same reason, right should also be positioned relatively Restore right:-220px
6.It’s probably adaptive at this point. If you want the container height to be consistent, you can add min-height:130px
to both left, middle and right. However, I found out that there is a problem in IE.. The height of the lower space in IE6/7/8/9 is not the same. Same...
Of course, in order to ensure that the window cannot be reduced too small to display the left and right sides, you can add min-width to the body
Okay, thanks for the code Top:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>圣杯布局</title><style type="text/css"> *{margin: 0;padding: 0;} body{min-width: 700px;} .header, .footer{ border: 1px solid #333; background: #aaa; text-align: center; } .left, .middle, .right{ position: relative; float: left; min-height: 130px; } .container{ padding:0 220px 0 200px; overflow: hidden; } .left{ margin-left: -100%; left: -200px; width: 200px; background: red; } .right{ margin-left: -220px; right: -220px; width: 220px; background: green; } .middle{ width: 100%; background: blue; word-break: break-all; } .footer{ clear: both; }</style></head><body><div class="header"> <h4>header</h4></div><div class="container"> <div class="middle"> <h4>middle</h4> <p>HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh </p> </div> <div class="left"> <h4>left</h4> <p>oooooooooooooo 0000000000000000 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000</p> </div> <div class="right"> <h4>right</h4> <p>BBBBBBBBBBBBBB 888888888888888888 BBBBBBBBBBBBBBBBBB 88888888888888888888</p> </div> </div> <div class="footer"> <h4>footer</h4> </div></body></html>
[Double flying wing layout]
DEMO
I heard that the double-flying wing layout was proposed by Uncle Yu and started with Taobao UED
If you combine three The column layout is compared to a big bird. You can think of main as the body of the bird, and sub and extra as the wings of the bird. The idea of implementing this layout is to first place the most important body parts, and then move the wings to the appropriate place.
In fact, it is similar to the Holy Grail layout above. Of course, you can also change it (if you want) Think about the difference)
Well, there is a bird here~
The sub of the left wing is 200px, and the right wing is extra..220px.. The main adaptation of the body is unknown.
1.In the html code, main should be placed at the front, sub extra
2.Main sub extra should be float:left
3.Fill the main with width: 100%
4.At this time, the main is full, so you need to pull the sub to the far left. Use margin-left:-100% Similarly, use margin-left:-220px for extra
(You can directly continue the steps of the holy grail layout above, or you can make changes)
5.The main content has been covered. In addition to using peripheral padding, you can also consider using margin.
Add an inner div to main-- main-inner, and then margin: 0 220px 0 200px
6.main displays the
code correctly Sincerely:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>双飞翼布局</title><style type="text/css"> *{margin: 0;padding: 0;} body{min-width: 700px;} .header, .footer{ border: 1px solid #333; background: #aaa; text-align: center; } .sub, .main, .extra{ float: left; min-height: 130px; } .sub{ margin-left: -100%; width: 200px; background: red; } .extra{ margin-left: -220px; width: 220px; background: blue; } .main{ width: 100%; } .main-inner{ margin-left: 200px; margin-right: 220px; min-height: 130px; background: green; word-break: break-all; } .footer{ clear: both; }</style></head><body><div class="header"> <h4>header</h4></div> <div class="main"> <div class="main-inner"> <h4>main</h4> <p>HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh </p> </div> </div> <div class="sub"> <h4>sub</h4> <p>oooooooooooooo 0000000000000000 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000</p> </div> <div class="extra"> <h4>extra</h4> <p>BBBBBBBBBBBBBB 888888888888888888 BBBBBBBBBBBBBBBBBB 88888888888888888888</p> </div> <div class="footer"> <h4>footer</h4> </div></body></html>
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
