在一个容器内部，要放在两个并排的DIV，两个方法：
1.使用浮动。这个方式div是脱离文档流的，在窗口布局复杂，大小变化的时候，可能会有一些不希望的情况发生。
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>Learn to use workerman to chat!</title>
5 <meta charset="utf-8">
6 <style>
7 .container{
8 width:100%;
9 height:100%;
10 }
11
12 .left{
13 text-align:center;
14 background-color: blue;
15 float:left;
16 width: 50%;
17 }
18
19 .right{
20 text-align:center;
21 background-color: red;
22 float:right;
23 width:50%;
24 }
25 </style>
26 </head>
27 <body>
28 <div class="container">
29 <div class="left">
30 This is left div.
31 </div>
32 <div class="right">
33 This is right div.
34 </div>
35 </div>
36 </body>
37 </html>
2.利用margin值为负值的效果。
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>Learn to use workerman to chat!</title>
5 <meta charset="utf-8">
6 <style>
7 .container{
8 width:100%;
9 height:100%;
10 }
11
12 .left{
13 text-align:center;
14 background-color: blue;
15 display:inline-block;
16 width: 50%;
17 }
18
19 .right{
20 text-align:center;
21 background-color: red;
22 display:inline-block;
23 margin-left:-5px;
24 width:50%;
25 }
26 </style>
27 </head>
28 <body>
29 <div class="container">
30 <div class="left">
31 This is left div.
32 </div>
33 <div class="right">
34 This is right div.
35 </div>
36 </div>
37 </body>
38 </html>
时间： 2024-08-07 12:22:52