如何防止內聯div跳到父級內的下一行？

我有兩個內聯div，其寬度超過父寬度。因此第二個div跳到下一行： http://jsfiddle.net/uVqG6/2/如何防止內聯div跳到父級內的下一行？

如何將兩個div保持在同一行上？

將overflow:hidden;添加到div.a只是隱藏第二個div。

來源

2012-12-26 TheOne

您可以使用position: absolute;這一點，否則除了增加你的div容器寬度或使其nowrap

Demo

使用z-indexDemo

CSS

.a { 
    width: 100px; 
    height: 50px; 
    border: solid 1px #345; 
    position: relative; 
} 

.b { 
    width: 60px;  
    height: 50px; 
    background-color: red; 
} 
.c { 
    width: 50px;  
    height: 50px; 
    background-color: green; 
    position: absolute; 
    right: 0; 
    top: 0; 
}

來源

2012-12-26 18:55:11

絕對沒有其他辦法位置解決方案是一個駭客，並且你的具體實現n正在改變div的顯示順序。 –

@ChristopherHarris你想說點什麼嗎？ –

使用'white-space：no-wrap;'在我的情況下似乎沒有幫助。絕對定位，但是有竅門。 – TheOne

.a { 
width: 100px; 
height: 50px; 
border: solid 1px #345; 
white-space: nowrap; 
overflow:hidden; }

這是做你想做的嗎？

來源

2012-12-26 18:53:13 Matt

內聯元素的行爲與文本的行爲非常相似。如果要防止它們打包，請刪除用於格式化的空白區域，或將white-space:nowrap;添加到.a的規則中。

這裏是一個演示：http://jsfiddle.net/bfkgT/

來源

2012-12-26 18:54:46

即使世界一對夫婦的方式做到這一點。首先，您可以使用display: inline-block;或float: left;來讓div並排坐在一起。他們工作不同，所以一定要爲您的案件使用正確的。

其次，除非包含div（a）足夠大以包含同一行上的兩個div，否則這兩者都不起作用。或者，您可以在包含div（a）上使用overflow: hidden;。

編輯：

我已經更新了你的例子：http://jsfiddle.net/uVqG6/11/

我不得不使用white-space: nowrap;，因爲裏面的div進行包裝。

下面是另一個答案，還回答了你的問題：CSS: how to stop text from taking up more than 1 line?

Remeber，使用display: inline-block基本上把元素爲文本，所以大部分文本格式CSS屬性將適用於它。

來源

2012-12-26 18:54:59

如何防止內聯div跳到父級內的下一行？

回答

相關問題