html - CSS:当文本很长时，具有自动宽度的内联 Div 会下推

Question

我面临与 inline-div 有关的 css 问题。 当文本(或句子)很长时，内联 div 会向下推，如下图所示:

但是，当我添加换行符时，它工作得很好。

如何使其工作而无需使用 <br> ？

要发布的主要内容是动态的，并且还需要响应。 谢谢

Please Note: This is a simplified version of my actual code. In the actual code the width of the main container is 100%

HTML

<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">SECOND</div>
<div id="thirdDiv">THIRD
<br>some more content<br> some more content
</div>

CSS

body{
    width: 350px;
    margin: 0px auto;
}
#container {
    border: 15px solid orange;   
}
#firstDiv{
    border: 10px solid brown;     
    display:inline-block;
    width: 70px;      
    overflow:hidden; 
    vertical-align:top;
}
#secondDiv{
    border: 10px solid skyblue;         
    float:left;
    width: 70px;     
}
#thirdDiv{
    display:inline-block;
    border: 5px solid yellowgreen; 
    vertical-align:top;    
}

Answer 1

使用:white-space: nowrap;作为包含长句子的div。