双飞翼布局

jingde528

已于 2022-11-29 09:58:14 修改

阅读量236

点赞数

分类专栏： css 文章标签： css html css3

于 2022-11-29 09:58:06 首次发布

本文链接：https://blog.csdn.net/jingde528/article/details/128092392

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现双飞翼布局，两边保持不保，只有中间变化：

html代码：

------------------------------------------------------------------------------------

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
   <style>
       *{padding:0;margin: 0;}
       .main >div{
           float:left;
       }
       .left{
           width:100px;
height:100px;
           background: red;
           margin-left:-100%;
       }
       .right{
           width:100px;
height:100px;
           background: green;
           margin-left:-100px;
       }
       .content{
           width: 100%;
           height: 100px;
           background:blue;
       }
       .item{
           padding-left: 100px;
           padding-right: 100px;
       }
   </style>
</head>