DIV 左右布局方案

来源：互联网发布：平面设计需要什么软件编辑：程序博客网时间：2024/06/11 03:06

本文内容大多基于官方文档和网上前辈经验总结，经过个人实践加以整理积累，仅供参考。

实际项目开发过程中遇到页面 DIV 左右布局的需求：左侧 DIV 固定宽度，右侧 DIV 自适应宽度，填充满剩余页面，由此引申出本文的几种解决方案

1 左侧 DIV 设置 float 属性为 left，右侧 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=Edge">    <title>Insert title here</title>    <style>      .left {        float: left;        width: 300px;        height: 300px;        background-color: red;      }      .right {        background-color: orange;        margin-left: 310px;        height: 300px;      }    </style>  </head>  <body>    <div class="left"></div>    <div class="right"></div>  </body></html>

实际效果：
这里写图片描述

2 左侧 DIV 设置 float 属性为 left，负边距 100%，右侧 DIV 中嵌套一个 DIV，页面内容放入嵌套的 DIV 中，右侧内嵌 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=Edge">    <title>Insert title here</title>    <style>      .left {        float: left;        width: 300px;        height: 300px;        background-color: gray;        margin-right: -100%;      }      .right {        float: left;        width: 100%;      }      .right-content {        height: 300px;        margin-left: 310px;        background-color: black;      }    </style>  </head>  <body>    <div class="left"></div>    <div class="right">      <div class="right-content"></div>    </div>  </body></html>

实际效果：
这里写图片描述

3 如果将需求修改为右侧固定宽度而左侧自适应宽度

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=Edge">    <title>Insert title here</title>    <style>      .left {        float: left;        width: 100%;        height: 300px;        background-color: blue;        margin-right: -300px;      }      .right {        float: right;        width: 300px;        height: 300px;        background-color: yellow;      }    </style>  </head>  <body>    <div class="left"></div>    <div class="right"></div>  </body></html>

实际效果：
这里写图片描述

0 0