美文网首页
如何实现两个或多个div并列于一行

如何实现两个或多个div并列于一行

作者: 南湘嘉荣 | 来源:发表于2021-05-10 21:17 被阅读0次

div是块状元素,默认是独占据一行。

但是,如何让两个或多个块区域并列于一行?

块状元素有一个很重要的“float”属性,可以达成这种效果。float 属性也被称为浮动属性,这个词非常形象。

对前面的div元素设置浮动属性后,当前面的div元素留有足够的空白宽度时,后面的div元素将自动浮上来,和前面的div元素并列于一行。

float 属性的值有 left、right、none 和 inherit。float 属性值为 none 时,块状元素不会浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置 div 浮动</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        #one {
            width: 125px;
            height: 120px;
            background-color: #eee;
            border: 1px solid #000;
            float: left;
        }
        #two {
            width: 200px;
            height: 120px;
            background-color: #eee;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="one">第1个div</div>
    <div id="two">第2个div</div>
</body>
</html>
效果图

但是要注意:要是2个div并列于一行的前提是这一行有足够的宽度容纳2个div的宽度。

相关文章

网友评论

      本文标题:如何实现两个或多个div并列于一行

      本文链接:https://www.haomeiwen.com/subject/jqfwdltx.html