zoukankan html css js c++ java

[css layout][02] three percentage columns

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 }

查看全文

相关阅读:
深入理解JavaScript系列（28）：设计模式之工厂模式
 创建指定数量的随机字符串
 VerifyCodeUtil.java
XmlUtils.java
MD5
JacksonUtils.java
Dom4jUtils.java
DateFormatUtil.java
CommonUtils.java
CacheManagerUtils.java

原文地址：https://www.cnblogs.com/qiudeqing/p/3416251.html