Jade 无法正确渲染流体宽度等间距的 div答案

【问题标题】：Jade not rendering fluid width equally spaced divs correctlyJade 无法正确渲染流体宽度等间距的 div
【发布时间】：2014-01-18 20:05:16
【问题描述】：

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

我有一个容器，它可以容纳流体宽度，等距 divs（text-justify 方法）在纯 HTML 中效果很好，但是当由 Jade 生成时，它无法将它们隔开（在 chrome、firefox 和 opera 中测试） .令人困惑的是呈现的 HTML 和 css 属性是相同的。

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

Jade 生成的 HTML 小提琴：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。 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' });
    };

【问题讨论】：

标签： javascript html node.js css pug

【解决方案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}) 之类的东西将 pretty 模式设置为 true，但这样您就失去了在生产环境中没有将 pretty 设置为 true 的好处。

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

【讨论】：

我建议使用 CSS（填充/边距/等）而不是空白。
我同意。我只是在回答为什么它们呈现不同的问题。
非常感谢！请问为什么不用空格？
结构和表示分离。

【解决方案2】：

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

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

由于.grid 的font-size 是0，所以句点不可见。

【讨论】：