css布局练习之双飞翼布局

双飞翼布局解析

最新推荐文章于 2022-03-21 22:52:55 发布

大海无量波涛凶

最新推荐文章于 2022-03-21 22:52:55 发布

阅读量199

点赞数

分类专栏： web

web 专栏收录该内容

145 篇文章

订阅专栏

本文详细介绍了双飞翼布局的实现原理与代码实践，通过HTML与CSS的巧妙结合，实现两侧固定宽度侧边栏和中间自适应内容区的布局方式。这种布局方式适用于多种网页设计场景，特别是在响应式设计中，能有效提升用户体验。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>双飞翼布局</title>
       <style>
.main {
   float: left;
   width: 100%;
}
.content {
   height: 200px;
   margin-left: 110px;
   margin-right: 220px;
   background-color: green;
}

.main::after {
   display: block;
   content: '';
   font-size: 0;
   height: 0;
   clear: both;
   zoom: 1;
}
   .left {
   float: left;
   height: 200px;
   width: 100px;
   margin-left: -100%;
   background-color: red;
   }
   .right {
   width: 200px;
   height: 200px;
   float: left;
   margin-left: -200px;
   background-color: blue;
   }
</style>

   </head>
   <body>
       <div class="main">
   <div class="content"></div>
   </div>
   <div class="left"></div>
   <div class="right"></div>
   </body>
</html>