1。作者的方法
1 #wrapper { 2 float: left; 3 width: 100%; 4 } 5 #content { 6 margin: 0 25%; 7 } 8 #navigation { 9 float: left; 10 width: 25%; 11 margin-left: -25%; 12 } 13 #extra { 14 float: left; 15 width: 25%; 16 margin-left: -100%; 17 } 18 #footer { 19 clear: both; 20 }
2。他float：left我float：right模仿一个
1 #wrapper { 2 float: right; 3 width: 100%; 4 } 5 #content { 6 margin: 0 25%; 7 } 8 #navigation { 9 float: right; 10 width: 25%; 11 margin-right: -100%; 12 } 13 #extra { 14 float: right; 15 width: 25%; 16 margin-right: -25%; 17 } 18 #footer { 19 clear: both; 20 }
3.全部float向左，wrapper宽度缩小
1 #wrapper { 2 float: left; 3 width: 50%; 4 margin-right: -25%; 5 position: relative; 6 left: 25%; 7 } 8 #navigation { 9 float: left; 10 width: 25%; 11 margin-right: -50%; 12 position: relative; 13 left: 50%; 14 } 15 #extra { 16 float: left; 17 width: 25%; 18 margin-left: -25%; 19 } 20 #footer { 21 clear: both; 22 }
4.全部float向右
1 #wrapper { 2 float: right; 3 width: 50%; 4 margin-left: -25%; 5 position: relative; 6 right: 25%; 7 } 8 #navigation { 9 float: right; 10 width: 25%; 11 margin-right: -25%; 12 } 13 #extra { 14 float: right; 15 width: 25%; 16 margin-left: -50%; 17 position: relative; 18 right: 50%; 19 } 20 #footer { 21 clear: both; 22 }