將3個塊相鄰放置的CSS

Question

我是一名CSS初學者，所以這可能是一個愚蠢的問題，但我仍然無法弄清楚:)。我試圖用百分比將3個塊彼此相鄰。我到目前爲止是：

#notification { 
     display: inline-block; 
     height: 100px; 
     width: 100%; 
    } 

    #date_pane{ 
     display: inherit; 
     height: inherit; 
     width:15%; 
    } 

    #text_pane{ 
     display: inherit; 
     height: inherit; 
     width: 75%;   
    } 

    #arrow_pane{ 
     display: inherit; 
     height: inherit; 
     width:10%;   
    } 

最後一個正方形站在下一行。我不知道爲什麼？有人知道這會發生什麼嗎？

我的HTML是：

<div id="notification"> 
    <div id="date_pane"></div> 
    <div id="text_pane"></div> 
    <div id="arrow_pane"></div> 
</div> 

這裏是一個Fiddle

Answer 1

使用

#notification{ 
    font-size:0; 
} 

然後將字體設置爲您在所有窗格所需的大小。也就是說或消除像這樣的div之間的空白：

<div id="notification"> 
    <div id="date_pane"> 
    </div><div id="text_pane"> 
    </div><div id="arrow_pane"> 
    </div> 
</div> 

這裏的問題是，的div之間的新的線正被解釋爲空白（因爲它們是現在內聯塊它們被視爲「字「），因此將字體設置爲0使得空間不存在。

http://jsfiddle.net/vfwKV/1/

Answer 2

使用：

#date_pane , #text_pane ,#arrow_pane { 
    float: left; 
} 

sample at jsfiddle

Answer 3

那麼你問什麼在技術上是不可能的。塊元素不被設計爲彼此相鄰。要麼它們必須被包裝在一個表格類型的環境中，或者如前面的答案所述，轉換爲一個內嵌塊元素。

Answer 4

u必須添加浮動：左

#date_pane, #text_pane, #arrow_pane { 
    float: left; 
} 

http://jsfiddle.net/p2x6G/

Answer 5

你的問題很常見。我自那以後做了75％15％和10％加起來100％，因此塊應該內聯。然而這在實踐中並不起作用。如果你改變你的％離開至少2％的擺動空間，它會正常工作。嘗試74％，14％和10％

你會使用浮動的或可能Flexbox，就更好。但你可以得到這個工作。

不要忘記，如果你使用float：left像別人建議清除浮游物一樣。

Answer 6

我覺得@唐的回答是最適合您遇到的實際問題，同時@Pavel和@ YD1m具有良好的（流行/繁體）替代的爲「內聯」塊。

但是，我想擴大/解釋唐的答案，因爲它可能不像一個新的CSS，HTML和DOM元素一樣明顯。

有

<div> 
    <element /> 
    <element /> 
    <element />   
</div> 

和

<div><element /><element /><element /></div> 

那的換行，製表符或空格額外的源格式被視爲在一定意義上一個特殊的「白色空間元素」之間的區別。內聯元素的規則是，瀏覽器在內聯元素之間識別多達一個空白空間。

換句話說，你能想到的，如果類似的文字：

<div> 
    A B  C 
</div> 
<!-- or --> 
<div> 
    A 
    B 
    C 
</div> 

我們知道，瀏覽器將每個字符輸出之間只有一個空格或白色空間（除非使用預先格式化的造型）。但是，如果我們真正想要的是有「A」，「B」和「C」相互接觸，我們需要把它寫這樣的：

<div>ABC</div> 

這是使用時，「什麼是你的榜樣發生直列塊」。你的內聯元素下列內聯元素的規則，並添加額外的空白，那就是當他說

把所有的窗格中的div在同一行

所以你@Don意味着什麼想使你的HTML像這樣：

<div id="notification"><div id="date_pane"></div><div id="text_pane"></div><div id="arrow_pane"></div></div> 

或者，像@Pavel和@ YD1m提到，開關使用inline-block浮動內部元件。這可能是大多數前端開發人員/設計人員最常見的事情。

有兩點需要注意，如果你漂浮內部元素：

1）使用clearfix技術來清除容器元素。我喜歡nicolasgallagher.com's micro solution，但如果您使用Twitter Bootstrap之類的工具，則可能已經擁有CSS。您的代碼如下所示：

<div id="" class="clearfix"> 
... 
</div> 

2）缺省框模型將填充和邊框添加到整體寬度。如果你使用的是確切的寬度（比如你正在做的），但決定使用邊框或者在框內添加一些填充，這會導致該框實際增長得比預期的大，推動結束塊幷包裝到下一個線。

我希望有幫助！

---

作爲一個除了我的上述評論有關元素之間的文本節點，我碰到一個真正有創造性的使用HTML註釋來避免「文本節點空白」的問題。我在查看AnEventApart.com網站時發現了這一點。

比方說你標記你的HTML像這樣

<div> 
    <element /> 
    <element /> 
    <element />   
</div> 

這將使用inline-block的時候，因爲有內聯元素將始終顯示至少一個單一的元素和空格之間的空白創建「空白」空間（如人物）。那麼，爲了避免它，並且仍然爲開發人員/設計師可讀性保留半格式的HTML，您可以使用HTML註釋將空白「包裝」掉。

<div><!-- 
    --><element /><!-- 
    --><element /><!-- 
    --><element /><!--  
--></div> 

上述技巧從技術上消除了空白區域，因爲一個元素終止爲註釋，該註釋終止回元素。所有的換行符和空格都被認爲是評論的一部分。

當然，這會將額外的HTML注入到標記中，但如果您處理的是10,20或「很多」項目列表，則這是一種更易讀的方法。

這將由喜歡閱讀其源代碼的人完成。但使用像Chrome的Web Developer Toolbar這樣的工具，他們可以自動格式化縮進和縮進標籤，所以您應該能夠刪除空白區域並將其用於讀取源代碼。

我只是通過我指出，因爲它仍然是一個有趣的創意。

乾杯！