我想要一个具有特定高度的垂直菜单.
每个孩子必须填写父母的高度并且具有中间对齐的文本.
孩子的数量是随机的,所以我必须使用动态值.
Div .container包含一个随机数的children(.item),它们总是必须填充父级的高度.为了实现这一点,我使用了flexbox.
为了使文本链接与中间对齐,我正在使用display: table-cell技术.但使用桌面显示需要使用100%的高度.
我的问题是.item-inner { height: 100% }在webkit(Chrome)中无效.
.item填充父级的高度与文本垂直对齐到中间？这里的示例jsFiddle,应该在Firefox和Chrome中查看
.container {
height: 20em;
display: flex;
flex-direction: column;
border: 5px solid black
}
.item {
flex: 1;
border-bottom: 1px solid white;
}
.item-inner {
height: 100%;
width: 100%;
display: table;
}
a {
background: orange;
display: table-cell;
vertical-align: middle;
}<div class="container">
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div> …这是我第一天做节点,我在尝试捆绑一些js文件时遇到了一些问题.
MyFolder
|-- app (folder)
| |-- Collections (contains: movies.js)
| |-- Models (contains: movie.js)
| |-- node_modules
|-- main.js
|-- node_modules (folder)
|-- static (folder)
这是我要压缩成static/bundle.js的js文件的内容
// app/models/movie.js
var Backbone = require("backbone");
var Movie = Backbone.Model.extend({
defaults: {
title: "default",
year: 0,
description: "empty",
selected: false
}
});
module.exports = Movie;
// app/collections/movies.js
var Backbone = require("backbone");
var Movie = require('models/movie');
var Movies = Backbone.Collection.extend({
model: Movie
});
module.exports = Movies;
当我运行browserify -r ./app/main:app > static/bundle.js文件时,使用app/main.js中的脚本创建bundle.js.它按预期工作.
但是当我运行时 …
我的VPS 安装了rbenv-vars,我在rails app里面的config目录中找到.rbenv-vars文件.我假装在其中加载数据库密码,但我做错了,因为rake db:create给了我一个无密码错误.当我将密码写为字符串时,Rake工作.
配置/ .rbenv-VARS
DB_PASS=my_db_password
配置/ database.yml的
password: $DB_PASS # Doesn't work
#password: <%= ENV['DB_PASS'] %> # Doesn't work
# password: my_db_password # Works
rbenv vars
ssh> rbenv vars
export DB_PASS='my_db_password'
下面你有我用来尝试实现3D动画的代码:
这是小提琴和代码:http: //jsfiddle.net/82C2N/
<html>
<head>
<title>3D CSS Animation</title>
<style>
#movieposters li {
display:inline; float:left;
-webkit-perspective: 500;
-webkit-transform-style: preserve-3d;
-webkit-transition-property: perspective;
-webkit-transition-duration: 0.5s;
transition-duration: 1s;
-moz-perspective: 500;
-moz-transform-style: preserve-3d;
-moz-transition-property: perspective;
width: 200px;
}
#movieposters li:hover {
-webkit-perspective: 5000;
-moz-perspective: 5000;
transition-duration: 1s;
transition-timing-function: linear;
width: 200px;
}
#movieposters li img {
-webkit-transform: rotateY(30deg);
-webkit-transition-property: transform;
transition-duration: 0.5s;
-moz-transition-duration: 1s;
-moz-transform: rotateY(30deg);
-moz-transition-property: transform;
width: 200px;
}
#movieposters li:hover img {
width: 200px;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
}
</style> …在Twig中,我要求每组四个结果都包含在div中.
这是我想要的最终html,每组必须包装4个项目:
{% for item in items %}
<div class="wrapper">
{{ item }}
{{ item }}
{{ item }}
{{ item }}
</div>
<div class="wrapper">
{{ item }}
{{ item }}
{{ item }}
{{ item }}
</div>
{% endfor %}