javascript - Jade 没有正确渲染流体宽度等距的 div

Question

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

我有一个容器，它保持宽度可变，等距 divs(text-justify 方法)在纯 HTML 中工作得很好，但当由 Jade 生成时它失败了将它们隔开(在 chrome、firefox 和 opera 中测试)。令人困惑的是呈现的 HTML 和 css 属性是相同的。

纯 HTML fiddle :http://fiddlesalad.com/html/fluid-column-layout-html-works

Jade 生成的 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'));
    });

路由.js /* * 获取主页。 */

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

Answer 1

哇。事实证明，纯 HTML 版本的空白是不同之处。你的 Jade 被渲染成这样:

<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}) 将漂亮模式设置为真，但这样您就失去了在生产环境中未将漂亮设置为真的好处.

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