css怎么设置4个div并排显示-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

css设置4个div并排的方法：1、使用float属性让4个div浮动起来即可。2、使用“display:inline;”或“display: inline-block;”样式将4个div转换为内联元素或内联块状元素即可。

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

div是块状元素，会独占一行，其宽度自动填满其父元素宽度；多个div元素在一起，会自动换行显示。那么如何让多个div元素并排显示？下面来给大家介绍一下方法。

方法1：使用float让div浮动起来

只要你的并排div盒子总宽度小于或等于最外层盒子宽度即可实现多个div对象并排显示。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                width: 120px;
                border: 1px solid red;
                float: left;
            }
        </style>
    </head>
    <body>
        <div>div测试文本！</div>
        <div>div测试文本！</div>
        <div>div测试文本！</div>
        <div>div测试文本！</div>
    </body>
</html>