html 元素大小为0,将卡片元素大小固定为相同的HTML+SCSS+JavaScript
匿名用户
应用以下规则:.cards-item__card--title {
display: flex;
min-height: 60px;
align-items: center;
justify-content: center;
font-size: 1.667em;
text-overflow: ellipsis;
}
您可以使用模板文字来简单地呈现。
nullconst config = {
url: 'https://api.randomuser.me',
numberCards: 12,
genderMale: 'male'
}
render(config)
function render(config) {
const url = `${config.url}?results=${config.numberCards}&gender=${config.genderMale}`
fetch(url)
.then(response => response.json())
.then(apiResponse => {
// Output API response to console to view.
//console.log(apiResponse.results);
// Card Implementation
var myapp = document.querySelector('.card__wrapper');
myapp.innerHTML = renderCards(apiResponse.results);
})
}
function renderCards(users) {
return `
${users.map(renderCard).join('')}
`
}
function renderCard(user) {
return `
src="${user.picture.large}" alt="lorem ipsum"
style="width:100px;height:100px">
${user.name.first} ${user.name.last}
Call
`
}:root {
--background-color: #eee;
--text-color: #333;
--card-background: #fff;
--card-cta-background: #e26d00;
--card-cta-color: #fff;
--default-spacing: 20px;
}
// default styling
*,
*:after,
*:before {
box-sizing: border-box;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
}
body {
background-color: var(--background-color);
color: var(--text-color);
font-family: Tahoma, sans-serif;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
display: block;
}
a:hover {
text-decoration: underline;
}
// Card
.card__wrapper {
display: flex;
justify-content: space-between;
margin: 0 auto;
max-width: 1024px;
}
.cards-item__card {
background-color: var(--card-background);
border-radius: 6px;
filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.2));
padding: var(--default-spacing);
margin: var(--default-spacing);
text-align: center;
}
.cards-item__card--image {
border-radius: 50%;
}
.cards-item__card--title {
display: flex;
min-height: 60px;
align-items: center;
justify-content: center;
font-size: 1.667em;
text-overflow: ellipsis;
}
.cards-item__card--cta {
background-color: var(--card-cta-background);
color: var(--card-cta-color);
border: none;
width: 100%;
padding: 5px;
bottom: 0px;
}
// New Class
.card__wrapper__maincontent {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
}
@media (max-width: 450px) {
.card__wrapper__maincontent__cards-item {
width: 100%;
}
}
@media (min-width: 450px) {
.card__wrapper__maincontent__cards-item {
width: 50%;
}
}
@media (min-width: 700px) {
.card__wrapper__maincontent__cards-item {
width: 33.3333%;
}
}
@media (min-width: 1024px) {
.card__wrapper__maincontent__cards-item {
width: 24%;
}
}
html 元素大小为0,将卡片元素大小固定为相同的HTML+SCSS+JavaScript相关推荐
- 【FTP】java FTPClient 文件上传内容为空,文件大小为0
问题:如题所述,使用FTPClient上传至FTP服务器, 表现如下:①文件大小为0 ②上传很小的文件,但是要花费很长的时间,20K要花费2分钟甚至更久 ③没有任何的报错,没有任何的乱码 解决方法: ...
- linux如何把文件大小改为0,关于文件系统:Linux删除大小为0的文件
本问题已经有最佳答案,请猛点这里访问. 如果它的大小为0,我如何在linux中删除某个文件.我想在crontab中执行它而不需要任何额外的脚本. l filename.file | grep 5th- ...
- 乱拔插U盘,导致U盘变成RAW未初始化格式,容量大小为0。
I 乱拔插U盘,导致U盘变成RAW未初始化格式,容量大小为0. II 我需要恢复数据啊啊啊啊 下载一个"easyrecovery数据恢复软件"将U盘里面的资料恢复出来了之后,再格式 ...
- oracle 文件大小为零,windows Oracle数据文件大小为0的恢复case
本站文章除注明转载外,均为本站原创: 转载自love wife love life -Roger 的Oracle技术博客 本文链接地址: windows Oracle数据文件大小为0的恢复case 一 ...
- python 浏览器下载文件_同样一个下载地址,用python爬虫爬取的种子文件大小为0,而用浏览器是可以正常下载下来的?...
1.访问某个网页,用浏览器可以下载其中嵌入的种子文件,种子文件大小是正常的,用迅雷工具也可以正常下载,但是用python爬虫爬取,并且下载下来的数据大小为0? 2.这是我自己写的代码. url = ' ...
- CSS解决display:inline-block产生的缝隙间隙-代码写在一行 设置字体大小为0 设置负margin
问题:行内存在空隙 <style type="text/css">ul li{display: inline-block;border: 1px solid #0000 ...
- linux通过tftp下载的文件大小为0,linux 通过 tftp下载文件
1.应用程序如何移植到目录板? 1)复制到介质,如U盘 2)通过网络(tftp)传输文件到开发板(文件较小,推荐使用) 3)置于根文件系统目录下制作文件系统镜像,再烧进开发板(文件很大,可以使用) 4 ...
- new Image() 获取图片大小为0的解决方法
最近接到一个需求,从后台返回一个图片的链接,然后前端需要将这个图片作为某个盒子的背景图,该盒子没有大小,需要根据图片大小来适应.因为后台没有返回图片大小,我们就要自己获取图片的尺寸大小.这时可以通过 ...
- pth大小为0,占用空间不为0
torch.save(net.state_dict(), f'weight/{base_recall}:.4f_{str(epoch)}_.pth') 原因:格式化写错了,文件没有后缀名 正确写法: ...
最新文章
- 20145223 《信息安全系统设计基础》课程总结
- 前端的date类型后台接收_腾讯高级前端工程师支招,云开发实现小程序打赏和提现云开发实践...
- 黄聪:wordpress如何开启文章格式post format
- Oracle中to_char()函数的用法
- sql server 2005管理员手册_执行一条sql语句都经历了什么?
- 一个简单的Web服务器
- android 扫描动画效果图,RadarView之自定义雷达扫描动画效果。
- PWM的基本原理及应用实例
- ffmpeg命令分析-b:v
- 深入探访支付宝双11十年路,技术凿穿焦虑与想象极限
- python实现12306余票
- 阿拉伯数字转化为中文大写
- php语言指什么生肖,龇牙咧嘴的生肖 指什么生肖
- 腾讯云服务器系统盘空间不足问题
- 《三国塔防》为什么成功?
- 菜鸟前端开发之正则校验
- IPM模块短路及对地短路剖析
- 时序分析基本概念介绍Scenario
- tidb-cdc日志tables are not eligible to replicate
- [HNOI2006]公路修建问题 ——二分答案+krukal(蒟弱个人总结)