老生常谈之三列布局

时间:2024-10-12 02:18:33

1、先写好基本样式,以及效果图

老生常谈之三列布局
老生常谈之三列布局

2、第一种方法:首先写出两个div,让第一个div左浮动,第二个div右浮动,第三个div直接以文档流去定位。由于第一个和第二个div是浮动流定位,所以会脱离文档流,并且第一个颊俄岿髭div会浮动到父容器区域的左边,第二个div会浮动到父容器的右边,在一排中显示。这时候第三个div由于是文档流定位的,且如果不设宽度或默认成100%,会随着浏览器窗口变化宽度的,因此前面两个浮动流区块会部分遮住此文档流区块,这时只用对此区块设置左右margin即可。

老生常谈之三列布局
老生常谈之三列布局

3、第二种方法:省去了float,直接用positon去定位。

老生常谈之三列布局
老生常谈之三列布局
© 手抄报圈