11条回答 默认 最新
- Kiloveyousmile 2018-05-10 13:19关注
大概看了一下,可以这样:
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <div id="main"> </div> </body> </html>
main.css
html, body { width: 100%; height: 100%; margin: 0; padding: 0; } #main { width: 800px; height: 100%; margin: auto; } .info_table { width: 100%; height: 60px; display: -webkit-flex; /* Safari */ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; } .info_person { width: 20%; height: 100%; flex-grow:1; } .person_img { width: 100%; height: 90%; } .person_msg { /* 自己调整 */ height: 20%; width: 100%; } .msg_style { display: block; font-size: 8px; text-align: center; }
main.js
// 数据格式 var data = [ { img: './img/1.jpg', name: '李阳', num: 'xxxx23xxxx', state: '正在干活' }, { img: './img/2.jpg', name: '李阳', num: 'xxxx23xxxx', state: '正在干活' }, { img: './img/3.jpg', name: '李阳', num: 'xxxx23xxxx', state: '正在干活' }, { img: './img/4.jpg', name: '李阳', num: 'xxxx23xxxx', state: '正在干活' }, { img: './img/5.jpg', name: '李阳', num: 'xxxx23xxxx', state: '正在干活' } ] $().ready(function () { for(i = 0; i < data.length; i += 5) { $("#main").append('<div class="info_table"></div>') for(j = 0; j < 5; j++) { let element = '<div class="info_person">\ <img src="'+ data[i+j].img + '" class="person_img" />\ <div class="person_info">\ <span class="msg_style">' + data[i+j].name + '</span>\ <span class="msg_style">' + data[i+j].num + '</span>\ <span class="msg_style">' + data[i+j].state + '</span>\ </div>\ </div>' $(`.info_table:eq(${i})`).append(element) } } })
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 3无用
悬赏问题
- ¥15 如何在scanpy上做差异基因和通路富集?
- ¥20 关于#硬件工程#的问题,请各位专家解答!
- ¥15 关于#matlab#的问题:期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707,使系统具有较小的超调量
- ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
- ¥30 截图中的mathematics程序转换成matlab
- ¥15 动力学代码报错,维度不匹配
- ¥15 Power query添加列问题
- ¥50 Kubernetes&Fission&Eleasticsearch
- ¥15 報錯:Person is not mapped,如何解決?
- ¥15 c++头文件不能识别CDialog