Le contenu de cet article concerne les quatre méthodes pour réaliser une disposition à double aile volante avec CSS (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
À partir des rendus, les effets de la disposition du Saint Graal et de la double aile volante La mise en page est la même.
La mise en page Holy Grail et la mise en page Double Wing ont une largeur fixe sur les côtés gauche et droit, et la largeur du contenu au milieu est adaptative, c'est-à-dire 100 %
<style> *{ margin: 0; padding: 0; box-sizing: border-box; } .clearfix:before, .clearfix:after{ display: table; content: " "; clear: both; } .container{ padding: 0 200px; } .header, .footer{ height: 200px; font-size: 28px; background-color: #f3f3f3; } .left{ position: relative; /* 2、将.left再次拉到最左边,否则.main的左侧会有200px的空白 */ left: -200px; float: left; width: 200px; min-height: 300px; /* 1、将.left拉到最左边,原来.left是掉下去的 */ margin-left: -100%; background-color: #f00; } .main{ float: left; width: 100%; min-height: 300px; background-color: #c32228; } .right{ position: relative; /* 2、将.right再次拉到最右边,否则.main的右侧会有200px的空白 */ right: -200px; float: left; width: 200px; /*/1、将.right拉到最右边,原来.right是掉下去的 */ margin-left: -200px; min-height: 300px; background-color: #f90; } </style>
<div class="header">header</div> <div class="container clearfix"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div> <div class="footer">footer</div>
<style> *{ margin: 0; padding: 0; box-sizing: border-box; } .clearfix:before, .clearfix:after{ display: table; content: " "; clear: both; } .header, .footer{ height: 200px; font-size: 28px; background-color: #f3f3f3; } .left{ float: left; width: 200px; min-height: 300px; /* 将.left拉到最左边,原来.left是掉下去的 */ margin-left: -100%; background-color: #f00; } .main{ float: left; width: 100%; min-height: 300px; /* .left、.right各占了200px,因此需要将其抵消掉 */ padding: 0 200px; background-color: #c32228; } .right{ float: left; width: 200px; /* 将.right拉到最右边,原来.right是掉下去的 */ margin-left: -200px; min-height: 300px; background-color: #f90; } </style>
<div class="header">header</div> <div class="container clearfix"> <div class="main"> <div class="main-inner">main</div> </div> <div class="left">left</div> <div class="right">right</div> </div> <div class="footer">footer</div>
<style> *{ margin: 0; padding: 0; box-sizing: border-box; } .container{ display: table; } .header, .footer{ height: 200px; font-size: 28px; background-color: #f3f3f3; } .left, .right, .main{ /* 外层容器使用table-cell布局,设置元素为table-cell布局后它们就能在一行显示了,display: table-cell;设置宽度无效, 因此他们的宽度由内容撑开。 */ display: table-cell; } .left-inner{ width: 200px; min-height: 300px; background-color: #f00; } .main{ width: 100%; } .main-inner{ min-height: 300px; background-color: #c32228; } .right-inner{ width: 200px; min-height: 300px; background-color: #f90; } </style>
<div class="header">header</div> <div class="container clearfix"> <div class="left"> <div class="left-inner">left</div> </div> <div class="main"> <div class="main-inner">main</div> </div> <div class="right"> <div class="right-inner">right</div> </div> </div> <div class="footer">footer</div>
Il y a un petit problème lors de l'utilisation du positionnement absolu : la hauteur du conteneur parent ne peut être déterminée que par la hauteur de .main
<style> *{ margin: 0; padding: 0; box-sizing: border-box; } .container{ position: relative; padding: 0 200px; } .header, .footer{ height: 200px; font-size: 28px; background-color: #f3f3f3; } .left{ position: absolute; top: 0; left: 0; width: 200px; min-height: 300px; background-color: #f00; } .main{ min-height: 300px; background-color: #c32228; } .right{ position: absolute; top: 0; right: 0; width: 200px; min-height: 300px; background-color: #f90; } </style>
<div class="header">header</div> <div class="container clearfix"> <div class="left">left</div> <div class="main">mian</div> <div class="right">right</div> </div> <div class="footer">footer</div>
<style> *{ margin: 0; padding: 0; box-sizing: border-box; } .clearfix:before, .clearfix:after{ display: table; content: " "; clear: both; } .container{ display: flex; } .header, .footer{ height: 200px; font-size: 28px; background-color: #f3f3f3; } .left{ flex: 0 0 200px; width: 200px; min-height: 300px; background-color: #f00; } .main{ flex: 1; width: 100%; min-height: 300px; background-color: #c32228; } .right{ flex: 0 0 200px; width: 200px; min-height: 300px; background-color: #f90; } </style>
<div class="header">header</div> <div class="container clearfix"> <div class="left">left</div> <div class="main">main</div> <div class="right">right</div> </div> <div class="footer">footer</div>
Recommandations associées :
Layout CSS Holy Grail Layout & Double Flying Wing Layout_html/css_WEB-ITnose
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!