不使用display：flex的另一個div中兩個div的垂直對齊

Question

我想將另一個div中兩個divs的內容對齊到頂部。

我不能使用display: flexbox ，它也必須是內聯CSS。 它在描述div僅包含一行時顯示我想要的方式，但是當它包含多行時，帶有數字的div將顯示在描述div上方，這是我現在的代碼：

 <!--Single line--> <div style="margin:10px 0 10px 0;"> <div style="display:inline-block; vertical-align:top"> 1.1</div> <div style="margin-left:50px; display: inline-block; vertical-align:top;"> Lorem ipsum dolor sit amet, pertinax honestatis suscipiantur mea eu, populo invidunt nam ne, nulla similique usu et. His accusata definitionem in. </div> </div> <!--Multiple lines--> <div style="margin:10px 0 10px 0;"> <div style="display:inline-block; vertical-align:top">1.2</div> <div style="margin-left:50px; display: inline-block; vertical-align:top;"> Id harum paulo bonorum vim, sit adhuc aliquid oportere in, ei quo dicta labitur salutatus. Debet doctus facilis ius ad, assum expetendis vix ex. Modus nostro concludaturque nec ad. No unum appellantur sea, assum oratio legere has et, est lorem concludaturque id. Ex pro audire nostrud, vel sale dissentias an, eos no zril vocibus principes. Noluisse praesent mei ea. Eam intellegat omittantur ea, sit tacimates quaestio definitiones ei. Et vix appareat reprehendunt, at cum alii aliquando, audire iuvaret instructior has eu. Sea id placerat ponderum, ea has deserunt assentior consectetuer. Nobis denique nominavi qui ut, cu prima idque perfecto eos. Quo soleat possit impedit eu. Id mucius graeci noluisse his. Sanctus appareat usu ne, per ea purto tractatos deterruisset. </div> </div> 

我希望每個項目都像1.1那樣顯示：

Answer 1

好吧，如果內聯元素在起作用，我將假定表也是公平的游戲：P

 <table> <tbody> <tr> <td style="width: 3rem; vertical-align: top">1.1</td> <td> <p style="margin-top: 0;"> Lorem ipsum dolor sit amet, pertinax honestatis suscipiantur mea eu, populo invidunt nam ne, nulla similique usu et. His accusata definitionem in. </p> </td> </tr> <tr> <td style="width: 3rem; vertical-align: top">1.2</td> <td> <p style="margin-top: 0;"> Id harum paulo bonorum vim, sit adhuc aliquid oportere in, ei quo dicta labitur salutatus. Debet doctus facilis ius ad, assum expetendis vix ex. Modus nostro concludaturque nec ad. No unum appellantur sea, assum oratio legere has et, est lorem concludaturque id. Ex pro audire nostrud, vel sale dissentias an, eos no zril vocibus principes. Noluisse praesent mei ea. Eam intellegat omittantur ea, sit tacimates quaestio definitiones ei. Et vix appareat reprehendunt, at cum alii aliquando, audire iuvaret instructior has eu. Sea id placerat ponderum, ea has deserunt assentior consectetuer. Nobis denique nominavi qui ut, cu prima idque perfecto eos. Quo soleat possit impedit eu. Id mucius graeci noluisse his. Sanctus appareat usu ne, per ea purto tractatos deterruisset. </p> </td> </tr> </tbody> </table> 

Answer 2

您的問題是您需要為容器提供width 。

 .number { display: inline-block; vertical-align: top; } .text { display: inline-block; width: 80%; } 

 //Single line <div> <div class="number"> 1.1</div> <div class="text"> Lorem ipsum dolor sit amet, pertinax honestatis suscipiantur mea eu, populo invidunt nam ne, nulla similique usu et. His accusata definitionem in. </div> </div> //Multiple lines <div> <div class="number">1.2</div> <div class="text"> Id harum paulo bonorum vim, sit adhuc aliquid oportere in, ei quo dicta labitur salutatus. Debet doctus facilis ius ad, assum expetendis vix ex. Modus nostro concludaturque nec ad. No unum appellantur sea, assum oratio legere has et, est lorem concludaturque id. Ex pro audire nostrud, vel sale dissentias an, eos no zril vocibus principes. Noluisse praesent mei ea. Eam intellegat omittantur ea, sit tacimates quaestio definitiones ei. Et vix appareat reprehendunt, at cum alii aliquando, audire iuvaret instructior has eu. Sea id placerat ponderum, ea has deserunt assentior consectetuer. Nobis denique nominavi qui ut, cu prima idque perfecto eos. Quo soleat possit impedit eu. Id mucius graeci noluisse his. Sanctus appareat usu ne, per ea purto tractatos deterruisset. </div> </div> 

使用flexbox是執行它的最簡單方法

 .container { display: flex; } .space { margin-right: 10px; } 

 //Single line <div class="container"> <div class="space">1.1</div> <div> Lorem ipsum dolor sit amet, pertinax honestatis suscipiantur mea eu, populo invidunt nam ne, nulla similique usu et. His accusata definitionem in. </div> </div> //Multiple lines <div class="container"> <div class="space">1.2</div> <div> Id harum paulo bonorum vim, sit adhuc aliquid oportere in, ei quo dicta labitur salutatus. Debet doctus facilis ius ad, assum expetendis vix ex. Modus nostro concludaturque nec ad. No unum appellantur sea, assum oratio legere has et, est lorem concludaturque id. Ex pro audire nostrud, vel sale dissentias an, eos no zril vocibus principes. Noluisse praesent mei ea. Eam intellegat omittantur ea, sit tacimates quaestio definitiones ei. Et vix appareat reprehendunt, at cum alii aliquando, audire iuvaret instructior has eu. Sea id placerat ponderum, ea has deserunt assentior consectetuer. Nobis denique nominavi qui ut, cu prima idque perfecto eos. Quo soleat possit impedit eu. Id mucius graeci noluisse his. Sanctus appareat usu ne, per ea purto tractatos deterruisset. </div> </div>