div并排排列的两种方法浅谈。

时间：2024-03-07 08:56:26

div是块级元素，所以在排列的时候会纵向排列，如果想解决这个问题的话，可以给div加上float：left/right样式，这样div就会横向排列（无缝排列）

.div-one{
    background-color:red;
    /*无缝排列*/
    float: left;
}

如果说想让div横向排列并且div之间有缝隙，那么可以将div变成行内块（display：inline-block）即可。

.div-one{
    background-color:red;
    /*有缝排列*/
    display: inline-block;
}




缺点：拖动浏览器宽度的时候，因为宽度变小，可能会有div被挤到下面去，所以建议使用float，给div设置百分比宽度（这里就是百分比布局了.........）


完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;}
        div{
            width:200px;
            height:200px;
        }
        .div-one{
            background-color:red;
            /*无缝排列*/
            float: left;
            /*有缝排列*/
            /*display: inline-block;*/
        }
        .div-two{
            background-color:blue;
            float: left;
            /*display: inline-block;*/

        }
        .div-three{
            background-color:yellow;
            float: left;
            /*display: inline-block;*/
        }
    </style>
</head>
<body>
<div class="div-one"></div>
<div class="div-two"></div>
<div class="div-three"></div>
</body>
</html>

-----------------------------------------------------------------------------
转载请标明出处

相关文章