CSS三栏布局——浮动
不使用定位，只使用浮动实现左右固定，中间宽度自适应布局实现关键：自适应部分一定要放在第一个位置，使用浮动，且宽度设置为100%，如果不设置为100%，浮动元素内容不够撑开整个宽度。左右固定部位，使用margin-left :负数，使其左右靠齐。中间自适应部分嵌套一个div，设置margin-left 和 margin-right 使其空出左右固定的宽度。代码如下：<!DOCTYPE HTML
三栏布局
CSS三栏布局——定位
这里首先让中间栏绝对定位，两边栏相对定位；这里需要注意的是，如果中间使用绝对定位，不设置宽度的话将会撑不开容器；因此，中间使用了相对定位后，同时设置margin-left和margin-right给左右两栏一定空间，然后左右两栏不管是相对定位还是绝对定位都可以，这里我们使用绝对定位：<!DOCTYPE HTML> <html lang="en-US"> <head&g
CSS三栏布局——双飞燕定位
这种布局方式需要对父容器设置padding，使用padding来给左右两栏空出空间如果左右两边使用绝对定位，那么方法就和上一节的方法差不多，如果使用相对定位，在结合浮动的话，方法代码如下：<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <titl
CSS三栏布局——flex
flex布局现在越来越流行，很多框架都采用flex布局。今天我们采用flex来实现三栏布局。首先父元素设置flex:display。左右分别设置flex: 0 0 200px。代码如下所示：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
数据加载中