DIV 布局之左右布局左侧自动适应右侧固定

最新推荐文章于 2024-08-08 13:55:38 发布

魔力化

最新推荐文章于 2024-08-08 13:55:38 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签： html css div box

本文链接：https://blog.csdn.net/zhangzhenisme/article/details/102771388

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>左边自动适应，右边固定</title>
    <style type="text/css">
      html,body {height: 100%;padding: 0; margin: 0; }
      .parent{
        width:600px;
        height: 450px;
        position: relative;
		background-color: red;
      }
      .left{
        background-color: red;
        height: 100%;
        width:100%;
        float:left;
        margin-left:-100px;
      }
      .right{
        width: 100px;
        background-color: #E6E9F0;
        height: 100%;
        float:right;
      }
    </style>
  </head>
    <div class="parent">
      <div class="left">
		<div style="margin-left: 100px;width: 100%;height: 100%;">left</div>
      </div>
      <div class="right">
        right
      </div>
    </div>  
</html>