默认情况下div会换行:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div>第一个div</div> <div>第二个盒子</div> </body> </html>
效果图:
1、对div设置float使div不换行
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style> div{ float:left} </style> </head> <body> <div>第一个div盒子</div> <div>第二个div盒子</div> </body> </html>
效果图:
2、对div设置display并排样式使div不换行
通过对div设置display:inline样式让div同样失去默认100��占一行的宽度。
display:inline意思是让对象并排显示。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{ display:inline} </style> </head> <body> <div>第一个div盒子</div> <div>第二个div盒子</div> </body> </html>
效果图:
以上就是css3怎么设置div不换行?的详细内容,更多请关注易知道|edz.cc其它相关文章!