div不换行的三种方法

https://www.cnblogs.com/robinunix/p/11346126.html

style="display: inline-block"

float

1 2 3 4 5 6 7 8 9 10

<div class="div1">123</div> <div class="div2">456</div> <style> .div1 { float: left; } .div2 { float: left; } </style>

　　

inline-block

1 2 3 4 5 6 7 8 9 10

<div class="div1">123</div> <div class="div2">456</div> <style> .div1 { display: inline-block; } .div2 { display: inline-block; } </style>

flex

这个是针对父元素设置的！！！

1 2 3 4 5 6 7 8 9

<div class="parent"> <div class="div1">123</div> <div class="div2">456</div> </div> <style> .parent { display: flex; } </style>