html5的div一行可以放两个吗

162 阅读 0 评论 107 点赞

我是靠谱客的博主虚心冬天，最近开发中收集的这篇文章主要介绍html5的div一行可以放两个吗，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

html5的div元素默认一行不可以放两个。

div是一个块级元素，一个元素会独占一行；因此两个div默认无法在同一行显示。

但可以利用display属性将块级元素转为行内元素，这样多个div就可以在同一行显示了。

块级元素转换成行内元素

在块级元素中设置display：inline;就可以让块级元素变成行内元素。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
div{
background-color: #FFC0CB;
margin: 10px;
}
.box {
display: inline;
}
</style>
</head>
<body>
<div>一个div元素，块级元素</div>
<div>一个div元素，块级元素</div>
<div>一个div元素，转为了行内元素</div>
<div>一个div元素，转为了行内元素</div>
</body>
</html>
登录后复制