CSS 双飞翼布局是什么?
双飞翼布局,就是两端固定宽高,中间自适应的三栏布局。
双飞翼布局主要解决俩问题:
三列布局,中间宽度自适应,两边定宽;
中间栏要在浏览器中优先展示渲染。
双飞翼布局要求
header和footer各自占领屏幕所有宽度,高度固定。
中间的container是一个三栏布局。
三栏布局两侧宽度固定不变,中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度。
双飞翼布局的实现
left、center、right三种都设置左浮动
设置center宽度为100%
设置负边距,left设置负边距为100%,right设置负边距为自身宽度
设置content的margin值为左右两个侧栏留出空间,margin值大小为left和right宽度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> </head> <style> body { min-width: 550px; font-weight: bold; font-size: 20px; } #header, #footer { background: rgba(29, 27, 27, 0.726); text-align: center; height: 60px; line-height: 60px; } #container { overflow: hidden; } .column { text-align: center; height: 300px; line-height: 300px; } #left, #right, #center { float: left; } #center { width: 100%; background: rgb(206, 201, 201); } #left { width: 200px; margin-left: -100%; background: rgba(95, 179, 235, 0.972); } #right { width: 150px; margin-left: -150px; background: rgb(231, 105, 2); } .content { margin: 0 150px 0 200px; } </style> <body> <div id="header">#header</div> <div id="container"> <div id="center" class="column"> <div class="content">#center</div> </div> <div id="left" class="column">#left</div> <div id="right" class="column">#right</div> </div> <div id="footer">#footer</div> </body> </html>
更多web前端开发知识,请查阅 HTML中文网 !!
以上就是CSS 双飞翼布局是什么?的详细内容,更多请关注0133技术站其它相关文章!