html - CSS 自动换行第二行文本

Question

当文本溢出第一行时，如何让文本保持“在它自己的一边”？

我有一个包含两个 div 的部分。 这两个 div 并排放置，但如果第一行已满，它会在第一个 div 下面的新行开始。 (这就是问题所在)

第一个 div 是 120px 宽，因为这是可以在那里打印的最宽文本。 第二个 div 是/应该是屏幕的其余部分。

我还创建了一个指向 jafiddle 的链接，以防页面上的链接不清楚。 当您有一个小窗口(电话等)时会出现问题。

页面由php生成。

http://jsfiddle.net/tL2fkLhq

.section{
        display: inline-block;
        width: 100%;
        float: left;
    }
    .pTrans1{
        float: left;
        width: 120px;
        color: red;

    }
    .pTrans2{
        display: inline;
        
    }

<section><div class='pTrans1'>15<font color='blue'>1120Z</font></div> <div class='pTrans2'><b>Meterologisk observation från den 15e kl 12:20 svensk tid.<font color=green> (32 minuter sedan)</font></b></div></section><br>

Answer 1

你可以使用display: table;

DEMO

.section{
   display: table;
}
.pTrans1{
   width: 120px;
   color: red;
   display: table-cell;
 }
.pTrans2 {
  display: table-cell;
}

<section>

    <div class='pTrans1'>15<font color='blue'>1120Z</font></div>
    <div class='pTrans2'><b>Meterologisk observation från den 15e kl 12:20 svensk tid.<font color=green> (32 minuter sedan)</font></b></div>

</section><br>