Question

我目前正在使用带有Jade的express.js将我一直在开发的HTML5 / CSS3 / Javascript网站移植到Node.js。

我有一个容器，它保持流体宽度，等间距divs（text-justify方法），在普通HTML中效果很好但是当由Jade生成时，它无法将它们分开（在chrome中测试， firefox＆amp; opera）。令人困惑的是，呈现的HTML和css属性是相同的。

简单的HTML小提琴：http://fiddlesalad.com/html/fluid-column-layout-html-works

Jade Generated HTML fiddle：http://fiddlesalad.com/less/fluid-column-layout-jade-not-working/

看起来text-align: justify;不起作用......虽然我不知道为什么。

我是Node.js，Express.js和Jade的新手，因此我的app.js或路由处理程序可能没有正确配置（之后我使用了express --session test和npm install更新我的package.json来处理我的依赖项）？

是否有另一种方法可以获得我可以使用的等间距流体div（我也尝试过类似的方法：Fluid width with equally spaced DIVs）？

app.js ：

    /**
     * Module dependencies.
     */

    var express = require('express');
    var routes = require('./routes');
    var user = require('./routes/user');
    var http = require('http');
    var path = require('path');

    var app = express();

    // all environments
    app.set('port', process.env.PORT || 3000);
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'jade');
    app.use(express.favicon());
    app.use(express.logger('dev'));
    app.use(express.json());
    app.use(express.urlencoded());
    app.use(express.methodOverride());
    app.use(express.cookieParser('your secret here'));
    app.use(express.session());
    app.use(app.router);
    app.use(express.static(path.join(__dirname, 'public')));

    // development only
    if ('development' == app.get('env')) {
      app.use(express.errorHandler());
    }

    app.get('/', routes.index);

    http.createServer(app).listen(app.get('port'), function(){
      console.log('Express server listening on port ' + app.get('port'));
    });

routes.js / * *获取主页。 * /

    exports.index = function(req, res){
      res.render('index', { title: 'Express' });
    };

Answer 1

哇。事实证明，纯HTML版本的空白是有区别的。你的玉就像这样呈现：

<div class="grid"><div class="column">Item 1</div><div class="column">Item 2</div><div class="column">Item 3</div><div class="column">Item 4</div><div class="column">Item 5</div></div>

但是当你手动写出来时，你会得到：

<div class="grid">
  <div class="column">Item 1</div>
  <div class="column">Item 2</div>
  <div class="column">Item 3</div>
  <div class="column">Item 4</div>
  <div class="column">Item 5</div>
</div>

你可以尝试在配置中使用app.locals({pretty:true})之类的设置将漂亮模式设置为true，但是你会失去在生产中没有设置为true的好处。

关于达到同样目的的另一种方法，我目前没有答案。

Answer 2

看起来只要原始标记中的div之间存在至少一个字符，间距就是正确的。这个解决方法对我有用：

div.grid
  div.column Item 1
  .
  div.column Item 2
  .
  div.column Item 3
  .
  div.column Item 4
  .
  div.column Item 5

由于font-size的{{1}}为.grid，因此期间不可见。

玉没有正确地渲染流体宽度等间隔div

2 个答案: