除了間距和縮進之外，兩個相同的div--它們爲什麼顯示不同？

我試圖用text-align:justify在另一個div中平等地分隔div。出於某種原因，如果HTML縮進但不是其他原因，它會起作用。不幸的是，我正在處理的應用程序經常使所有的html在一個大字符串中運行，所以我需要弄清楚如何。除了間距和縮進之外，兩個相同的div--它們爲什麼顯示不同？

這裏是一個鏈接到一個碼筆兩個問題： http://www.codepen.io/evanhobbs/pen/LDgJc

這裏是代碼：

1-等同於數2，但是與所有的間隔/壓痕

<div class="equal-justify-wrapper"> 
    <div>one</div> 
    <div>two</div> 
    <div>three</div> 
    <span class="equal-justify-stretcher"></span> 
</div>

2-。相同的號碼1，但與所有的間距/壓痕去除

<div class="equal-justify-wrapper"><div>one</div><div>two</div><div>three</div><span class="equal-justify-stretcher"></span></div>

CSS

.equal-justify-wrapper { 
    list-style: none; 
    background-color:red; 
    text-align: justify; 
    -ms-text-justify: distribute-all-lines; 
    text-justify: distribute-all-lines; 
} 

.equal-justify-wrapper > div { 
    width: auto; 
    //height: 40px; 
    vertical-align: top; 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
    background: #000; 
    color: yellow; 

} 

.equal-justify-stretcher { 
    width: 100%; 
    display: inline-block; 
    font-size: 0; 
    line-height: 0; 
}

來源

2013-10-07 Evan Hobbs

注意此事的人的注意事項：適用於IE 10;在FF和Chrome中失敗。如果您在div定義FF和Chrome之間放置' '，則會正確顯示。 – NotMe

這也是在評論[此處]中注意到的一點（http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs/16310009#comment13627118_6880421）作者：venimus – Danield

這是因爲當它們之間沒有空格它們被認爲是一個字。（想象一個長一句話，你已經插入標籤上色一些字母。你不會希望有字拆分那裏。）

在第一種情況中的空白（輸入/製表）充當字邊界。

您需要在標籤之間引入一些空白區域，以使父級上的屬性像text-align: justify;生效。

來源

2013-10-07 22:44:17

謝謝！很有幫助。 –

聽起來像這是正確的行爲。見Alignment: the 'text-align' property和Inline formatting contexts：

在「證明」的情況下，該屬性指定的行內框將被製成與行框，如果可能的兩邊沖洗，通過擴展或收縮的內容內聯框，否則按照初始值進行對齊。

如果[文本對齊]屬性具有值「證明」，則用戶代理可以伸展以串聯盒空間和詞語（但不是內聯表和內聯塊框），以及。

沒有空白，沒有正當理由。

瀏覽器可能使用letter spacing來證明第二個例子中的單個單詞。儘管如此，這仍然會導致不同的顯示文本。

問題在於您使用的框架，因爲它太熱切地刪除空格。爲了解決這個問題，你應該找到一種方法來保留空白。您可以嘗試使用空格字符的unicode html實體： 

來源

2013-10-07 22:46:45 Kapep

謝謝！很有幫助。 –

除了間距和縮進之外，兩個相同的div--它們爲什麼顯示不同？

回答

相關問題