如何並排保持兩個同軸塊的div側即使第二個div溢出

我有以下的HTML和CSS代碼：如何並排保持兩個同軸塊的div側即使第二個div溢出

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
body 
{ 
    background-color:#d0e4fe; 
} 

div.container 
{ 
    width: 600px; 
    border: solid 1px black; 
} 

div.divLeft 
{ 
    display:inline-block; 
    border: solid 1px red; 
    color: red; 
} 

div.divRight 
{ 
    display:inline-block; 
    border: solid 1px blue; 
    color: blue; 
} 

</style> 
</head> 

<body> 
    <div class="container"> 
    <div class="divLeft"> 
     <p>1 - Some short text</p> 
    </div> 
    <div class="divRight"> 
     <p>Some not too long text with the div besides the first one.</p> 
    </div> 
    </div> 
    <div class="container"> 
    <div class="divLeft"> 
     <p>2 - Some short text</p> 
    </div> 
    <div class="divRight"> 
     <p>Some very long text that will eventually wrap because it is so long and when it wraps is when the trouble starts because the div moves down instead of staying besides the first one.</p> 
    </div> 
    </div> 
</body> 
</html>

在第二種情況下，有沒有辦法讓DIV除第一個，而不是第一個。請注意，我無法將固定寬度用於我的div，作爲將在其中顯示的文本的長度未知的長度。那麼只有我知道的是，第一個div中的文本總是很短，第二個文本中的文本可能很長。

這裏是我想要的一個基本圖：

First div text Second div text stays beside the first one 
       and wraps around still being aligned like this

謝謝大家！

來源

2012-08-12 Gilles jr Bisson

你可以發佈一個圖表顯示預期的結果嗎？我不明白你的意思 – 2012-08-12 06:59:18

系統不會讓我發佈圖片，因爲我是新用戶。 – 2012-08-12 19:56:52

我添加了一個顯示我想要的「基本」圖。 – 2012-08-12 20:02:38

確定。我終於完成了使用只有一行和兩個單元格的表格所需要的功能。表格佔用整個寬度。第一個單元格的文本是nowrap，所以它佔據了它所需的所有空間。第二個單元格上的文本佔用了剩餘的空間，並按需要進行換行並保持良好對齊。

來源

2012-08-12 20:55:02

另一種選擇是讓DIV具有顯示風格：表格單元格。 – neonguru 2015-01-23 22:50:58

顯示爲inline-block的元素根據其內容進行換行並嘗試保持內聯。你正在使用的代碼完全是這樣的。當第二個div的內容溢出時，它會增加容納的大小。

適當的解決方案是，將width添加到元素。

.divLeft { width: 150px; vertical-align: top; } 
.divRight { width: 400px; vertical-align: top; }

Demo

來源

2012-08-12 06:51:07 Starx

不幸的是，我不能使用一個固定的寬度作爲出現在div中的文本的長度不知道給我。我需要讓第一個div佔據它需要的空間，第二個使用餘下的空間。 – 2012-08-12 07:59:44

如何並排保持兩個同軸塊的div側即使第二個div溢出

回答

相關問題