html实现div在同一行

使用弹性布局完成div在同一行显示，应用在导航中。

# js实现深拷贝 

# let dataTextAll = new Array();
# let dataTextDate = JSON.parse(JSON.stringify(dataTextAll));

 

1 在同一行中有两个div

<!DOCTYPE html>
<html>
<head>
    <title>测试</title>
    <style type="text/css">
        .data{
            width: 100px;
            display: flex;
        }
        .data_left{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .data_right{
            white-space: nowrap;
            /* 自动向右对齐 */
            margin-left: auto;
        }
    </style>
</head>
<body>
<!--两个div使用弹性布局 -->
<div class="data">
    <div class="data_left">
        左侧尽量显示，内容超出宽度显示省略号
    </div>
    
    <div class="data_right">
        右侧靠右
    </div>
</div>
</body>
</html>

 

2 在同一行中有多个div弹性布局

使用弹性布局和盒布局

<!DOCTYPE html>
<html>
<head>
    <title>测试</title>
    <style type="text/css">
        .data{
            /*注意：此处使用width无效*/
            display: flex;
        }
        .data>div{
            box-sizing: border-box;
            /* 如果 div高度不一样，让div顶部对齐使用vertical-align*/
            /*vertical-align: top;*/
        }
        .data_left{
            width:300px;
            background-color: #E6A23C;
        }
        .data_middle{
            flex: 1;
            background-color: #909399;
        }
        .data_right{
            background-color: #67C23A;
            width:300px;
        }
    </style>
</head>
    
<body>
<!-- 多个div使用弹性布局与盒布局 -->
<div class="data">
    <div class="data_left">
        左侧
    </div>

    <div class="data_middle">
        中间
    </div>
    
    <div class="data_right">
        右侧
    </div>
</div>
</body>
</html>