两个div默认情况下就是垂直排列的,代码如下:
<divstyle="border:5pxsolidred;"> 哈哈哈 </div> <divstyle="border:5pxsolidblack;"> 呵呵呵 </div>
效果如图:
但是有时候因为你设置了别的属性,div垂直排列怎么都不行,那该怎么办呢?解决方案有两种:
方式一:如果你想在div垂直排列的时候之间没有间隔,只需要在style加入如下属性:
style="clear:both;"
整体html代码:
<divstyle="border:5pxsolidred;"> 哈哈哈 </div> <divstyle="border:5pxsolidblack;clear:both;""> 呵呵呵 </div>
方式二:如果div垂直的时候想要设置间隔,则可以在中间加一个div,并加入如下style属性,height表示此div的高度,也就是之间的距离:
.clear{ height:20px; clear:both; }
整体代码如下:
<divstyle="border:5pxsolidred;"> 哈哈哈 </div> <divclass="clear"></div> <divstyle="border:5pxsolidblack;"> 呵呵呵 </div>
两个div水平排列就简单了,只需要设置这两个div的style="float: left”属性即可,代码如下:
<divstyle="float:left;width:100;"> 哈哈哈 </div> <divstyle="float:left;width:100;"> 呵呵呵 </div>
完毕
这篇关于“CSS中div垂直排列和水平排列效果的代码是什么”的文章就介绍到这了,更多相关的内容,欢迎关注恒创科技,小编将为大家输出更多高质量的实用文章!