<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固比固的方法</title> <style> /* 清空所有的margin和padding */ *{ margin:0; padding: 0; } div{ width: 100%; /*浏览器的百分之百*/ height: 100px; margin:100px auto; background-color: #bc4f70; position: relative; } div p:nth-of-type(1){ width: 100px; height: 100px; background-color: #02ff1c; position: absolute; /*采用绝对定位,不占用父盒子的宽度,实际上是会占用body的宽度的,也就是浏览器的宽度*/ /* 把这个盒子绝对定位到最左边 */ top:0; left: 0; } div p:nth-of-type(2){ width: 100%; /* 此时,中间的盒子占有的是浏览器去掉盒子1和盒子2占的宽度后剩余部分的百分之百,该宽度会随浏览器窗口的大小而变化 */ height: 100px; background-color: red; padding-left: 100px; /*盒子1遮住了盒子2的内容,通过padding来解决*/ box-sizing: border-box; /*添加了padding后,盒子2的宽度会增加100px,浏览器会出现滚动条,通过box-sizing来解决*/ } div p:nth-of-type(3){ width: 120px; /*该盒子的宽度保持固定宽度,不会随浏览器窗口的大小而改变*/ height: 100px; background-color: #fff534; position: absolute; /* 把该盒子绝对定位到浏览器的最右边 */ top:0; right: 0; } </style> </head> <body> <div> <p>1</p> <p>2</p> <p>3</p> </div> </body> </html>
转载于:https://my.oschina.net/u/3338272/blog/858271