翡翠無法正確渲染流體寬度等距divs

我目前正在移動一個HTML5/CSS3/Javascript網站，我一直在使用express.js和Jade開發Node.js。翡翠無法正確渲染流體寬度等距divs

我有保持流體寬度，相等地間隔divs（該text-justify方法），該工作在普通的HTML很大，但通過玉生成時它未能空間出來（在鉻試驗，火狐&歌劇）的容器。令人困惑的是呈現的HTML和CSS屬性是相同的。

純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和Jade的新手，所以有可能我的app.js或路由處理程序沒有正確配置（在更新我的package.json來處理後，我使用了express --session test和npm install我的依賴）？

是否有另一種方法獲得等間隔流體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 /* * GET主頁。 */

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

來源

2014-01-18 schanq

哇。事實證明，純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>

你可以試試漂亮模式設置爲true，在配置中類似app.locals({pretty:true})，但隨後你失去了在生產中沒有設置好的好處。

至於實現相同目標的另一種方法，目前我還沒有答案。

來源

2014-01-18 21:28:57 juanpaco

我會建議間距與CSS（填充/邊距/等），而不是與空白。 –

我同意。我只是回答了他們爲什麼呈現不同的問題。 – juanpaco

非常感謝你！我可以問爲什麼不使用空格？ – schanq

它看起來像只要至少有一個字符在div之間的原始標記，間距是正確的。此解決辦法爲我工作：

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，週期是不可見的。

來源

2014-01-20 22:01:30 pixatebob

翡翠無法正確渲染流體寬度等距divs

回答

相關問題