欢迎使用CSDN-markdown编辑器

来源：互联网发布：富士通热敏打印软件编辑：程序博客网时间：2024/06/09 19:04

两栏布局（双飞翼布局）：左边宽度固定，右边宽度自适应（方向相反时原理相同，要注意html顺序）

负边距：负边距对由文档流控制的元素会使他们在文档流中的位置发生偏移，但这种偏移不同于相对定位，相对定位的偏移，元素不改变其本身的占位，即不脱离文档流，而通过负边距进行偏移的元素会放弃偏移前占据的空间，而后面的元素将补上空位，即文档流只会从后向前“流动”。

总之，在文档流中，元素的最终边界即占位是由margin来决定的，margin为负时相当于元素的占位会往里收，文档流认得是边界，不管实际尺寸。

输入图片说明

浮动（定位）+外边距
定位与浮动效果差不多，就不多做赘述了。
只给左边加浮动时，left元素脱离文档流，不占位，此时给右边元素加margin即可，若是没有背景，加padding也可以。

<style type="text/css">body{    margin:0;    padding: 0;}.left{    width:200px;    float: left;    height: 200px;    background-color: #ccc;}.right{    height: 700px;    margin-left: 200px;    background: orange;}</style>

<body><div class="left"></div><div class="right"></div></body>

自身浮动+自适应元素负边距

使用浮动使两个块left，right呈两栏排列，由于左边宽度固定，left元素脱离文档流，所以给右边的块状元素加一个margin-left，其值为负的左边的固定宽度，使right元素与left元素
左对齐，此时给right的子元素加一个margin让出左边固定宽度的位置。

<style type="text/css">body{    margin:0;    padding: 0;}.left{    width: 200px;    float: left;    background-color: blue;    height: 100%;}.right{    width: 100%;    float: left;    height: 100%;    margin-left: -200px;}.inner{    margin-left: 200px;    background-color: red;    height: 500px;}</style>

<body><div class="left">    <div id```="inner">left</div></div><div class="right">    <div class="inner">right</div></div></body>

浮动和固定元素负边距

与上一种方法原理基本相同，都是采用负边距产生文档流上的偏移。

<style type="text/css">body{    margin:0;    padding: 0;}.left{    background-color: #bbb;    float: left;    width: 200px;    margin-right: -100%;}.right{    float: left;    width: 100%;}.main{    margin-left: 200px;    background-color: orange;    width: 100%;    height: 500px}</style>

<body>    <div class="left">        LEFTSIDE    </div>    <div class="right">        <div class="main"> MAIN CONTENT</div>    </div></body>

用flex布局写

<style type="text/css">body{    margin: 0;    padding: 0;}.page{    width: 100%;    display: flex;}.left{    background-color: #ccc;    flex:0 0 200px;}.right{    background-color:  orange;    flex:auto;}</style>

<body>    <div class="page">        <div class="left">LEFT</div>        <div class="right">RIGHT</div>    </div></body>

用overflow写

<style type="text/css">body{margin: 0;padding: 0;}.left{    width: 200px;    height: 300px;    background-color: #ccc;    float: left;}.right{    height: 500px;    background: orange;    overflow: auto;}    </style>

<body>    <div class="left"></div>    <div class="right"></div></body>

阅读全文

0 0