上一篇：详解用CSS background属性实现切图是怎样的下一篇：HTML页面中div内部如何实现垂直滚动条？

今天这篇给大家分享的知识是“CSS中div垂直排列和水平排列效果的代码是什么”,小编觉得挺不错的，对大家学习或是工作可能会有所帮助，对此分享发大家做个参考，希望这篇“CSS中div垂直排列和水平排列效果的代码是什么”文章能帮助大家解决问题。

两个div默认情况下就是垂直排列的，代码如下：

<div style="border:5px solid red;">
 哈哈哈
</div>

<div style="border:5px solid black;">
 呵呵呵
</div>

效果如图：

但是有时候因为你设置了别的属性，div垂直排列怎么都不行，那该怎么办呢？解决方案有两种：

方式一：如果你想在div垂直排列的时候之间没有间隔，只需要在style加入如下属性：

style="clear:both;"

整体html代码：

<div style="border:5px solid red;">
哈哈哈
</div>

<div style="border:5px solid black;clear:both;"">
呵呵呵
</div>

方式二：如果div垂直的时候想要设置间隔，则可以在中间加一个div，并加入如下style属性，height表示此div的高度，也就是之间的距离：

.clear{
    height:20px;
    clear:both;
}

整体代码如下：

<div style="border:5px solid red;">
 哈哈哈
</div>
<div class="clear"></div>
<div style="border:5px solid black;">
 呵呵呵
</div>

两个div水平排列就简单了，只需要设置这两个div的style="float: left”属性即可，代码如下：

<div style="float: left;width:100;">
 哈哈哈
</div>

<div style="float: left;width: 100;">
 呵呵呵
</div>

完毕

这篇关于“CSS中div垂直排列和水平排列效果的代码是什么”的文章就介绍到这了,更多相关的内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！

标签： div垂直排列

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：详解用CSS background属性实现切图是怎样的下一篇：HTML页面中div内部如何实现垂直滚动条？