我正在尝试使用CSS网格创建一个表,基于内容使用相等的列.我想避免使用<table>.这是此问题的后续问题:使用CSS网格自动调整列
我想要实现的目标:
此表有效:https://codepen.io/anon/pen/baExYw
但是我想把每一行包裹起来div,这不足为奇地打破了桌子.
该表格已破:https://codepen.io/anon/pen/qpbMgG
app.html
<div class="wrapper">
<div class="box a">col 1</div>
<div class="box b">col 2</div>
<div class="box c">col 3</div>
<!-- Table Row -->
<div class="row">
<div class="box d">short data</div>
<div class="box e">a really long piece of data</div>
<div class="box f">short data</div>
</div>
<!-- Table Row -->
<div class="row">
<div class="box d">short data</div>
<div class="box e">a really long piece of data</div>
<div class="box f">short data</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
app.css
.wrapper …Run Code Online (Sandbox Code Playgroud) 我的Firebase中有两个项目:providers而且services,我正在尝试使用Firebase推荐的扁平化架构方法找出构建和建立关系的最佳方法.
我的数据看起来像这样:
{
"services" : {
"hip_replacement" : {
"title" : "Hip Replacement"
}
},
"providers" : {
"the_blue_hospital" : {
"title" : "The Blue Hospital"
}
}
}
Run Code Online (Sandbox Code Playgroud)
我想将这两个项目链接在一起,这样如果您要访问髋关节置换页面,蓝色医院会显示在它下面,如果您要访问蓝色医院页面,髋关节置换将显示在其下方.基本上是一种双向关系.
构建这样的东西最好的方法是什么?我在考虑以下几点:
{
"services": {
"hip_replacement": {
"title": "Hip Replacement",
"providers": {
"the_blue_hospital": true,
"the_red_hospital": true
}
},
...
},
"providers": {
"the_blue_hospital": {
"title": "The Blue Hospital",
},
"the_red_hospital": {...
},
"the_green_hospital": {...
}
}
}
Run Code Online (Sandbox Code Playgroud)
有没有更好的方法来实现这个或更优雅的解决方案?任何帮助表示赞赏.
提前致谢!
我知道你可以在Sass/Scss中做一些简单的数学运算.但有没有办法从百分比中减去像素?例如:
$image-size: 200px;
.bio {
width: 100% - $image-size;
}
Run Code Online (Sandbox Code Playgroud) 我见过类似的问题,然后跟着发球.如果绑定空/未定义(带过滤器),角度模板默认值
我的对象看起来像这样:
{
"image": {
"icon_url": "http://static.giantbomb.com/uploads/square_avatar/9/93770/2496414-dying-light-2013523175751_8.jpg",
"medium_url": "http://static.giantbomb.com/uploads/scale_medium/9/93770/2496414-dying-light-2013523175751_8.jpg",
"screen_url": "http://static.giantbomb.com/uploads/screen_medium/9/93770/2496414-dying-light-2013523175751_8.jpg",
"small_url": "http://static.giantbomb.com/uploads/scale_small/9/93770/2496414-dying-light-2013523175751_8.jpg",
"super_url": "http://static.giantbomb.com/uploads/scale_large/9/93770/2496414-dying-light-2013523175751_8.jpg",
"thumb_url": "http://static.giantbomb.com/uploads/scale_avatar/9/93770/2496414-dying-light-2013523175751_8.jpg",
"tiny_url": "http://static.giantbomb.com/uploads/square_mini/9/93770/2496414-dying-light-2013523175751_8.jpg"
},
"name": "Dying Light",
"original_game_rating": null,
"original_release_date": null,
"objectID": "346569380"
}
Run Code Online (Sandbox Code Playgroud)
我将左侧表达式包装在括号中,但是对于具有一年的项目,它不显示"TBA" null.
<span>{{ (getDate(hit.original_release_date) | date:'yyyy') || 'TBA' }}</span>
Run Code Online (Sandbox Code Playgroud)
我有一种感觉,这是因为我正在引用一个函数并且已经使用了一组括号.我怎么解决这个问题...?
对此有任何帮助表示赞赏.提前致谢!
更新:
这是getDate()功能:
$scope.getDate = function(date) {
return $filter('dateToISO')(date);
};
Run Code Online (Sandbox Code Playgroud)
和dateToISO过滤器:
.filter('dateToISO', function() {
return function(input) {
var dateTime = input.split(" ");
var date = dateTime[0];
var datePartials = date.split("-");
var time = dateTime[1]; …Run Code Online (Sandbox Code Playgroud) itemprop="articleBody"在多个元素上使用是不好的做法。我问是因为我的页面是这样的:
<main class="post content">
<article itemscope itemType="http://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">My Blog Headline</h1>
<p><time class="dt-published" itemprop="datePublished" pubdate datetime="2015-01-24 19:08:00">Jan 24, 2015</time></p>
<p itemprop="author">Published by <a class="p-author h-card" itemprop="name" href="http://author.co.uk">Author Name</a></p>
</header>
<section itemprop="articleBody">
<p>Article body</p>
<p>Article body</p>
</section>
<section class="gallery">
...
</section>
<section itemprop="articleBody">
<p>Article body</p>
<p>Article body</p>
</section>
</article>
</main>
Run Code Online (Sandbox Code Playgroud)
我的文章正文之间有一个画廊,可以像上面一样itemprop="articleBody"在多个sections 上使用吗?
PSdisplay: none在我的上使用也是不好的做法itemprop="author"吗?我不希望它成为页面设计的一部分,还有其他方法吗?
我正在使用angularjs-google-maps,并且在尝试将我的客户作为地图上的标记循环时收到错误.
<map>
<custom-marker ng-repeat="cust in customers" position="[ {{ cust.lat }}, {{ cust.lon }} ]">
<div class="{{ cust.category }}">{{ cust.name }}</div>
</custom-marker>
</map>
Run Code Online (Sandbox Code Playgroud)
该错误似乎有事情做与cust.category和cust.name,当我删除这些,他们工作得很好.
这是我得到的错误消息的前几行:
Watchers fired in the last 5 iterations: [["[ cust.category , cust.name ]; newVal:
[\"pro\",\"Fred\"]; oldVal: [\"pro\",\"Fred\"]","fn: function (context) {\n
try {\n for(var i = 0, ii = length, part; i<ii; i++) {\n
Run Code Online (Sandbox Code Playgroud)
完整的错误消息在这里.
对此有任何帮助表示赞赏.提前致谢!
UPDATE
代号为定制标记指令,是角谷歌,地图的一部分,是在这里.
我正在尝试在我的grunt构建过程中使用Babel将我的.js项目文件从ES6转换为ES5.我有一个watch任务正在查看我的.js目录中的更改,当检测到更改时,我运行babel任务.
但是出于某种原因,仅更改一个.js文件需要6-10秒才能完成.我感觉它正在整个项目的转变,但我不确定.我Gruntfile.js看起来像这样:
grunt.initConfig({
watch: {
babel: {
files: ["<%= yeoman.app %>/scripts/**/*.js"],
tasks: ["babel"]
},
livereload: {
options: {
livereload: LIVERELOAD_PORT
},
files: [
"{.tmp,<%= yeoman.app %>}/scripts/**/*.js",
]
}
},
babel: {
options: {
sourceMap: true,
presets: ['es2015']
},
dist: {
files: [
{
expand: true,
cwd: '<%= yeoman.app %>/scripts/',
src: ['**/*.js'],
dest: '.tmp/scripts/'
}
]
}
}
});
grunt.registerTask("serve", function(target) {
return grunt.task.run(["watch"]);
});
Run Code Online (Sandbox Code Playgroud)
当我运行grunt serve并更改文件时,它会记录执行时间: …
我正在尝试弄清楚 CSS 网格是否能够像表格一样运行。
因此,如果我有很长的“单元格数据”(第 2 列),并且表中其他地方有可用空间,我不希望它像下图中那样换行:
我想要实现的就是这样的事情。具有较长内容的列会增长,而其他列会根据该列中的内容而缩小。
我在 CodePen 上上传了一个示例: https: //codepen.io/anon/pen/WdNJdY
.wrapper {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
background-color: #fff;
color: #444;
max-width: 800px;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}Run Code Online (Sandbox Code Playgroud)
<div class="wrapper">
<div class="box a">col 1</div>
<div class="box b">col 2</div>
<div class="box c">col 3</div>
<div class="box d">short data</div>
<div class="box e">a really long piece of data</div>
<div class="box f">short data</div>
</div>Run Code Online (Sandbox Code Playgroud)
我对 CSS 网格非常陌生,所以我很好奇这是否可能。
任何帮助表示赞赏。提前致谢!
有没有办法根据特定请求在 Charles 中进行本地映射?我的 API 发出一个 OPTIONS 请求,然后发出一个 GET 请求。
当我在 Charles 中进行本地映射时,它会将响应映射到该 OPTIONS 请求。我希望它将响应映射到 GET 请求。
有没有解决的办法?我是这个工具的新手。
任何帮助表示赞赏。提前致谢!
我试图找出如何的结果保存serviceId到一个services叫上一个父对象provider1,当services对象是尚未建立.
我的Firebase数据如下所示:
"providers" : {
"provider1" : {
"name" : "The Whittington Hospital",
}
}
Run Code Online (Sandbox Code Playgroud)
这就是我如何保存结果serviceId:
for (var providerKey in service.providers) {
var providerId = providers.$getRecord(providerKey);
providerId.services[serviceId] = true;
providers.$save(providerId);
}
Run Code Online (Sandbox Code Playgroud)
但我无法设置[serviceId]为true,因为services对象尚不存在,它是未定义的.
Firebase不允许你创建空对象,否则我的下面会有一个空的services: {}obj provider1.
我怎样才能解决这个问题.任何帮助表示赞赏.提前致谢!
javascript ×4
angularjs ×3
css ×2
css-grid ×2
firebase ×2
html ×2
angularfire ×1
babeljs ×1
gruntjs ×1
microdata ×1
percentage ×1
pixels ×1
relationship ×1
sass ×1
schema.org ×1