Javascript Jade未正确渲染流体宽度等间距的div

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

我有一个容器，它可以容纳流体宽度、等距的

divs

（

text-justify

方法），在纯HTML中效果很好，但当由Jade生成时，它无法将它们隔开（在chrome、firefox和opera中测试）。令人困惑的是，呈现的HTML和css属性是相同的

普通HTML提琴：

Jade生成的HTML小提琴：

它看起来像

text align:justify不工作。。。。虽然我不知道为什么

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

是否有其他方法可以获得等间距的流体div，我可以使用（我也尝试过类似的方法：）

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' });
    };

哇。事实证明，纯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>

项目1项目2项目3项目4项目5

但当您手动写入时，您会得到：

<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>


项目1
项目2
项目3
项目4
项目5

您可以尝试在您的配置中使用类似于
app.locals（{pretty:true}）
的东西将pretty模式设置为true，但这样您就失去了在生产环境中不将pretty设置为true的好处

至于达到同样目的的另一种方法，我目前还没有答案。
哇。事实证明，纯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>

项目1项目2项目3项目4项目5

但当您手动写入时，您会得到：

<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>


项目1
项目2
项目3
项目4
项目5

您可以尝试在您的配置中使用类似于
app.locals（{pretty:true}）
的东西将pretty模式设置为true，但这样您就失去了在生产环境中不将pretty设置为true的好处

至于达到同样目的的另一种方法，我目前还没有答案。
哇。事实证明，纯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>

项目1项目2项目3项目4项目5

但当您手动写入时，您会得到：

<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>


项目1
项目2
项目3
项目4
项目5

您可以尝试在您的配置中使用类似于
app.locals（{pretty:true}）
的东西将pretty模式设置为true，但这样您就失去了在生产环境中不将pretty设置为true的好处

至于达到同样目的的另一种方法，我目前还没有答案。
哇。事实证明，纯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>

项目1项目2项目3项目4项目5

但当您手动写入时，您会得到：

<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>


项目1
项目2
项目3
项目4
项目5

您可以尝试在您的配置中使用类似于
app.locals（{pretty:true}）
的东西将pretty模式设置为true，但这样您就失去了在生产环境中不将pretty设置为true的好处

至于实现相同目的的另一种方法，我目前没有答案。
看起来，只要原始标记中的
div
s之间至少有一个字符，间距就正确。这个变通方法对我很有效：

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

由于
.grid
的
字体大小为
0
，因此句点不可见。
看起来，只要原始标记中的
div
之间至少有一个字符，间距就正确。这个变通方法对我很有效：

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

由于
.grid
的
字体大小为
0
，因此句点不可见。
看起来，只要原始标记中的
div
之间至少有一个字符，间距就正确。这个变通方法对我很有效：

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

由于
.grid
的
字体大小为
0
，因此句点不可见。
看起来，只要原始标记中的
div
之间至少有一个字符，间距就正确。这个变通方法对我很有效：

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

由于
.grid
的
字体大小
为
0
，因此句点不可见。
我建议使用css（填充/边距等）而不是空格。我同意。我只是在回答为什么它们呈现不同的问题。非常感谢！我可以问一下为什么不使用空白吗？结构和表达的分离。我建议使用css（填充/边距等）而不是空白。我同意。我只是在回答为什么它们呈现不同的问题。非常感谢！我可以问一下为什么不使用空白吗？结构和表达的分离。我建议使用css（填充/边距等）而不是空白。我同意。我只是在回答为什么它们呈现不同的问题。非常感谢！我可以问一下为什么不使用空白吗？结构和表达的分离。我建议使用css（填充/边距等）而不是空白。我同意。我只是在回答为什么它们呈现不同的问题。非常感谢！我可以问一下为什么不使用空格吗？结构和表示的分离。