百度前端学院--三栏式排版

今天决定要学习百度前端技术学院布置的题目,做一个很小的demo:要求两侧的宽度固定不变,而中间内容的一栏,根据浏览器的宽度自适应。但是我被一个问题困扰了很久,元素设置了position属性。

给子元素元素设置相对定位就可以让他自适应,但是我在定位右侧的元素的时候,我把div放在中间元素下面,所以在设置元素位置的时候,总是不符合,右侧元素 right 总是在另外一行。

但是我把right的div放在left的div后面,并且.right,.left都设置了float:left; 两个div自然就排列在同一行

设置右侧位置大小不变,左侧自适应

一般是右侧position:absolute; 然后设置margin,移动元素位置

position详解

https://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html

猜你喜欢

转载自blog.csdn.net/lian_easel/article/details/80020171