1。作者还是全部float向左
1 #wrapper { 2 width: 100%; 3 float: left; 4 } 5 #content { 6 margin-left: 50%; 7 } 8 #navigation { 9 width: 25%; 10 float: left; 11 margin-left: -100%; 12 } 13 #extra { 14 width: 25%; 15 float: left; 16 margin-left: -75%; 17 } 18 #footer { 19 clear: both; 20 }
2.全部float向右
1 #wrapper { 2 width: 100%; 3 float: right; 4 } 5 #content { 6 margin-left: 50%; 7 } 8 #navigation { 9 width: 25%; 10 float: right; 11 margin-right: -25%; 12 } 13 #extra { 14 width: 25%; 15 float: right; 16 margin-right: -50%; 17 } 18 #footer { 19 clear: both; 20 }
3.#wrapper宽度50%全部向右浮动
1 #wrapper { 2 width: 50%; 3 float: right; 4 } 5 #navigation { 6 width: 25%; 7 float: right; 8 margin-left: -25%; 9 position: relative; 10 left: -25%; 11 } 12 #extra { 13 width: 25%; 14 float: right; 15 } 16 #footer { 17 clear: both; 18 }
4.#wrapper宽度50%向左浮动
1 #wrapper { 2 width: 50%; 3 float: left; 4 margin-right: -50%; 5 position: relative; 6 left: 50%; 7 } 8 #navigation { 9 width: 25%; 10 float: left; 11 } 12 #extra { 13 width: 25%; 14 float: left; 15 } 16 #footer { 17 clear: both; 18 }