1.两栏布局

　　两栏布局一般就是一栏定宽一栏自适应（也就是流动）。分的细的话还有左栏定宽右栏自适应、右栏定宽左栏自适应。

　　举个栗子：一栏定宽200px，一栏自适应。

1 <head>
 2     <meta charset="UTF-8">
 3     <title>两栏布局</title>
 4     <style>
 5         .wrap{clear: both;height: 400px;font-weight:bold;">#e9e9e9;}
 6         .side{float: left;width: 200px;font-weight:bold;">#d4d4d4}
 7         .content{margin-left: 200px;font-weight:bold;">#ccc;}
 8     </style>
 9 </head>
10 <body>
11 <div class="wrap">
12     <div class="side">这里定宽</div>
13     <div class="content">这里是内容自适应这。。。。。。应这里是内容自适应</div>
14 </div>
15 </body>

最终效果：

css创建java_css创建java

如果右栏定宽，左栏自适应

1 <head>
 2     <meta charset="UTF-8">
 3     <title>两栏布局</title>
 4     <style>
 5         .wrap{clear: both;height: 400px;background-color: #e9e9e9;}
 6         .side{float: right;width: 200px;background-color: #d4d4d4}
 7         .content{margin-right: 200px;background-color: #ccc;}
 8     </style>
 9 </head>
10 <body>
11 <div class="wrap">
12     <div class="side">这里定宽</div>
13     <div class="content">这里是内容自。。。。应这里是内容自适应这里是内容自适应</div>
14 </div>
15 </body>

如图：

css创建java_自适应_02

这里特别说明：定宽的一栏先写，然后根据哪一侧定宽再向哪边浮动，自适应的再相应设置margin。

 

2.三栏布局

　　三栏布局一般是左右栏定宽，中间自适应。

核心问题，就是处理右栏的定位，并在中栏内容区大小改变时控制右栏与布局的关系。

    方法一：

        控制两个外包装容器的外边距。其中一个外包装包围所有三栏，另一个外包装只包围左栏和中栏。

    第一个外包装宽度100%，第二个外包装宽度100%，右外边距设为负数，给右边栏流出位置，右栏固定宽度左浮动。

    第二个外包装中，左边栏固定宽度左浮动，中栏宽度自适应设为auto，分别设置左外边距和右外边距，分别为左栏和右栏宽度，此处边距应是正数。

    第二个外包装也要左浮动

代码如下：

1 <head>
 2     <meta charset="UTF-8">
 3     <title>三栏流动布局</title>
 4     <style type="text/css">
 5         * {margin:0; padding:0;}
 6         body {font:1em helvetica, arial, sans-serif;}
 7         a{ text-decoration: none; color: #fff;}
 8         li{ list-style-type: none; }
 9 
10         div#main_wrapper{min-width:600px; max-width:1100px;margin:0 auto;}
11         header {padding:5px 10px;background:#3f7ccf;}
12         div#threecolwrap {float:left;width:100%;}
13         div#twocolwrap{ float: left; width: 100%; margin-right:-210px; }
14         nav {float:left;width:150px;background:#f00;padding:20px 0;}
15         nav > * {margin:0 10px;}
16         article {width:auto;margin-left:150px;margin-right:210px;background:#eee;padding:20px 0;}
17         article > * {margin:0 20px;}
18         aside {float:left;width:210px;background:#ffed53;padding:20px 0;}
19         aside > * {margin:0 10px;}
20         footer {clear:both;width:100%;text-align:center;background:#333;}
21     </style>
22 </head>
23 <body>
24 <div id="main_wrapper">
25     <header>页头</header>
26     <div id="threecolwrap">
27         <div id="twocolwrap">
28             <nav>
29                 <ul>
30                     <li><a href="#">无序列表</a></li>
31                     <li><a href="#">无序列表</a></li>
32                     <li><a href="#">无序列表</a></li>
33                     <li><a href="#">无序列表</a></li>
34                     <li><a href="#">无序列表</a></li>
35                 </ul>
36             </nav>
37             <article>
38                 <div class="inner">
39                     这里是一些文本元素这里是...这里是一些文本元素.
40                 </div>
41             </article>
42         </div>
43         <aside>
44             <ul>
45                 <li><a href="#">第三列导航链接</a></li>
46                 <li><a href="#">第三列导航链接</a></li>
47                 <li><a href="#">第三列导航链接</a></li>
48                 <li><a href="#">第三列导航链接</a></li>
49                 <li><a href="#">第三列导航链接</a></li>
50             </ul>
51         </aside>
52     </div>
53     <footer>页脚</footer>
54 </div>
55 </body>

css创建java_自适应_03

 

 

    方法二：

        css3的单元格实现，给每栏设置 display：table-cell；如果是固定栏，再设置上宽度即可。但此方法只支持ie7以上版本

css创建java_自适应_04

css创建java_css创建java_05

1 <head>
 2     <meta charset="UTF-8">
 3     <title>三栏流动布局</title>
 4     <style type="text/css">
 5         * {margin:0; padding:0;}
 6         body {font:1em helvetica, arial, sans-serif;}
 7         a{ text-decoration: none; color: #fff;}
 8         li{ list-style-type: none; }
 9         header {padding:5px 10px;background:#3f7ccf;}
10         nav,article,aside{display: table-cell;}
11         nav {width: 150px;background:#f00;padding:20px 0;}
12         nav > * {margin:0 10px;}
13         article {width:auto;background:#eee;padding:20px 0;}
14         article > * {margin:0 20px;}
15         aside {width:210px;background:#ffed53;padding:20px 0;}
16         aside > * {margin:0 10px;}
17         footer {clear:both;width:100%;text-align:center;background:#333;}
18     </style>
19 </head>
20 <body>
21 <div id="main_wrapper">
22     <header>页头</header>
23     <div id="threecolwrap">
24         <nav>
25             <ul>
26                 <li><a href="#">无序列表</a></li>
27                 <li><a href="#">无序列表</a></li>
28                 <li><a href="#">无序列表</a></li>
29                 <li><a href="#">无序列表</a></li>
30                 <li><a href="#">无序列表</a></li>
31             </ul>
32         </nav>
33         <article>
34             <div class="inner">
35                 这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素.
36             </div>
37         </article>
38         <aside>
39             <ul>
40                 <li><a href="#">第三列导航链接</a></li>
41                 <li><a href="#">第三列导航链接</a></li>
42                 <li><a href="#">第三列导航链接</a></li>
43                 <li><a href="#">第三列导航链接</a></li>
44                 <li><a href="#">第三列导航链接</a></li>
45             </ul>
46         </aside>
47     </div>
48     <footer>页脚</footer>
49 </div>
50 </body>

View Code

 

 

 

css创建java_外边距_06