
默认情况下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其它相关文章!














