不使用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>