Jade not rendering fluid width равномерно распределенные divs правильно

Question

Я сейчас в процессе перемещения сайта HTML5/CSS3/Javascript, который я разрабатывал для Node.js, используя express.js с Jade.

У меня есть контейнер, который содержит ширину жидкости, равное расстояние divs (метода text-justify), который прекрасно работает в обычном HTML, но когда генерируется Джейдом он терпит неудачу в пространство их (проверено в хроме, светлячок & оперы). Путаница заключается в том, что визуализированные свойства HTML и css идентичны.

Plain HTML скрипка: http://fiddlesalad.com/html/fluid-column-layout-html-works

Джейд Сгенерированного HTML скрипка: http://fiddlesalad.com/less/fluid-column-layout-jade-not-working/

Похоже text-align: justify; не работает .... хотя я понятие не имею, почему.

Я новичок в Node.js, Express.js и Джейд, поэтому возможно, что мой app.js или обработчики маршрута не было правильно настроены (я использовал express --session test и npm install после обновления моего package.json обращаться мои предложения)?

Есть ли альтернативный способ получения одинаково разнесенных, жидких divs, которые я могу использовать (я также пробовал этот аналогичный метод: 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 /* * GET домашней страницы. */

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

Answer 1

Wow. Оказывается, что пробел, который имеет чистая версия 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}) в конфигурации, но затем вы теряете выгоду от того, что вы не справляетесь с реальностью в производстве.

Что касается другого метода достижения того же конца, у меня нет ответа на это в это время.

Answer 2

Похоже, что существует не менее одного символа между div s в сырой разметке, расстояние правильное. Это решение работает для меня:

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

С font-size из .grid является 0, периоды не видны.