码迷,mamicode.com
首页 > Web开发 > 详细

Html 两个DIV并排的问题

时间:2016-12-15 17:43:47      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:lock   body   play   blog   窗口   line   nbsp   变化   splay   

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

技术分享

 

Html 两个DIV并排的问题

标签:lock   body   play   blog   窗口   line   nbsp   变化   splay   

原文地址:http://www.cnblogs.com/jingjingdidunhe/p/6183756.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!