flex布局实现等分

    xiaoxiao2022-09-22  5

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .color_container { width: 100%; height: 22px; display: flex; flex-direction: row } .color_container>div{ height: 22px; flex: 1; margin-left: 10px; } </style> </head> <body> <div class="color_container"> <div title="紫色" style="background-color: rgb(121, 56, 106);"></div> <div title="蓝色" style="background-color: rgb(57, 107, 179);"></div> <div title="绿色" style="background-color: rgb(152, 203, 104);"></div> <div title="黄色" style="background-color: rgb(251, 220, 4);"></div> <div title="橙色" style="background-color: rgb(243, 121, 32);"></div> <div title="红色" style="background-color: rgb(202, 33, 40);"></div> </div> </body> </html>

     

    最新回复(0)