CSS 左右固定、中间自动适应+贴在下方

最新推荐文章于 2024-07-13 09:58:58 发布

点点滴滴25

最新推荐文章于 2024-07-13 09:58:58 发布

阅读量297

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_41325698/article/details/102175896

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.左右固定、中间自动适应

2.一个div始终贴在下方

1.左右固定、中间自动适应

<style>
 .left{
   width:200px;
   float:left;
   background-color:pink
  }
  .right{
   width:200px;
   float:right;
   background-color:pink
  }
  .center {margin:0 200px;   background-color:lightblue}
</style>
  
<div class="left">左边固定宽度</div>
<div class="right">左边固定宽度</div>
 <div class="center">中间自适应</div>
 
</head>
 
<body>
 
</html>

2.一个div始终贴在下方

首先把蓝色div设置为相对定位

然后把内部的绿色div设置为绝对定位， bottom: 0表示贴在下面

<style>
#div1
        {
            position: relative;
            height: 300px;
            width: 90%;
            background-color: skyblue;
        }
        #div2
        {
            position: absolute;
            bottom: 0;
            height: 30px;
            width: 100%;
            background-color: lightgreen;
        }
    </style>
 
<div id="div1">
    <div id="div2"> 无论蓝色div高度如何变化，绿色div都会贴在下面
    </div>
</div>