Html 兩個DIV並排的問題

時間 2019-12-20

標籤 html 兩個 div 並排問題欄目 HTML 简体版

原文原文鏈接

在一個容器內部，要放在兩個並排的DIV，兩個方法：html

1.使用浮動。這個方式div是脫離文檔流的，在窗口布局複雜，大小變化的時候，可能會有一些不但願的狀況發生。ide

 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。