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

image.png
<!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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容