欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！
CSS手册 CSS3手册 CSS论坛 CSS培训 CSS任务 网闻
DIVCSS5培训 系统快速学会CSS布局技术！
DIVCSS5首页 > CSS3 >

对div加display:inline实现div并排不换行

display:inline用该属性+值将删除行违拗

1、display:inline完成div并排实例代码



    
	
  1. 
		<!DOCTYPE html>
    2. 
	
  2. 
		<html>
    3. 
	
  3. 
		<head>
    4. 
	
  4. 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. 
	
  5. 
		<title>CSS5 display:inline实现DIV并排</title>
    6. 
	
  6. 
		<style>
    7. 
	
  7. 
		.bbb1,.bbb2,.bbb3,.bbb4{ display:inline} 
    8. 
	
  8. 
		/* 4个css简写简写 感化：共用display:inline样式 */ 
    9. 
	
  9. 
		</style>
    10. 
	
  10. 
		</head>
    11. 
	
  11. 
		 
    12. 
	
  12. 
		<body>
    13. 
	
  13. 
		<div class="bbb1">我在bbb1内</div>
    14. 
	
  14. 
		<div class="bbb2">我在bbb2内</div>
    15. 
	
  15. 
		<div class="bbb3">我在bbb3内</div>
    16. 
	
  16. 
		<div class="bbb4">我在bbb4内</div>
    17. 
	
  17. 
		</body>
    18. 
	
  18. 
		</html>
    19. 




	2、div排成一排实例截图



	Css display:inline实现两个或多个div并排显示不换行截图 Css display:inline完成两个或多个div并排显现不换行截图


     
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c53781.shtml

						

						
						

							
						

						

							

								
必备CSS教程Essential CSS Tutorials

							

							

								
							

						

						

							

								
必备HTML基础教程Essential HTML Tutorials

							

							

								
							

						

					

				

				

					

						

							
最新文章 NEWS

						

						

							
						

					

					

						

							
CSS 特效 CSS EFFECTS

						

						

							
						

					

					

						

							
相关文章 RELATED

						

						

							
						

					

					

						

							
热点文章 HOT