Html 两个DIV并排的问题

最新推荐文章于 2023-11-21 12:39:45 发布

weixin_30432179

最新推荐文章于 2023-11-21 12:39:45 发布

阅读量230

点赞数

原文链接：http://www.cnblogs.com/jingjingdidunhe/p/6183756.html

版权

在一个容器内部，要放在两个并排的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>

View Code

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>