首页 > 代码库 > Html 两个DIV并排的问题
Html 两个DIV并排的问题
在一个容器内部，要放在两个并排的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>
Html 两个DIV并排的问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。