Html CSS将内联块元素并排保留

我想将2

div

并排放置，即使我使用了

display:inline block

，也有一半时间它不起作用

为什么我说了一半的时间？这是因为如果我的第二个

div

包含与元素宽度不匹配的文本，则整个

div

将位于第一个下方。但是如果文本很短并且可以适合第二个元素的宽度，则不会发生这种情况

为了举例说明，请检查此项

.inline块{
显示：内联块；
}
.bold{
字体大小：粗体；
}
.描述hdr{
宽度：150px；
/*身高：100%*/
}
.desc hdr，
.描述值{
垂直对齐：顶部；
}

一第一标题
Lorem ipsum dolor sit amet。
第二个标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一种便利食品。埃尼安·伊德·利古拉（Aenean id ligula）和奥古斯·阿库姆（augue accumsan maximus）坐在阿梅特·维韦拉·努克（amet viverra nunc）的座位上。前庭妊娠期，nec-commodo-enim-suscipit妊娠期。佩伦茨克
时间元素的开放门。毛里斯的名字来自于人马。佩伦特斯式的弗林蒂利亚·维利特·尼塞尔（Frientesquella velit nisl），是一位有能力完成面部手术的女性。Proin aliquet，arcu在调味品元素，nunc est pharetra est，id
索利西丁尼西多拉酒店。这是一种非常有效的方法。但我的智慧是温和的。

这就是

内联块的工作原理，您可以在第一项上使用
float:left


.bold{
字体大小：粗体；
}
.描述hdr{
宽度：150px；
浮动：左；
}
.desc hdr，
.描述值{
垂直对齐：顶部；
}
.说明项目{
明确：两者皆有；
}

一第一标题
Lorem ipsum dolor sit amet。
第二个标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一种便利食品。埃尼安·伊德·利古拉（Aenean id ligula）和奥古斯·阿库姆（augue accumsan maximus）坐在阿梅特·维韦拉·努克（amet viverra nunc）的座位上。前庭妊娠期，nec-commodo-enim-suscipit妊娠期。佩伦茨克
时间元素的开放门。毛里斯的名字来自于人马。佩伦特斯式的弗林蒂利亚·维利特·尼塞尔（Frientesquella velit nisl），是一位有能力完成面部手术的女性。Proin aliquet，arcu在调味品元素，nunc est pharetra est，id
索利西丁尼西多拉酒店。这是一种非常有效的方法。但我的智慧是温和的。
这是因为内联块是块容器。它们必须是矩形，不能有这样的形状：

      ┌─────┐
      │     │
┌─────┘     │
│           │
│           │
└───────────┘

您可以做的是浮动标题。然后，它们将停止流动，并与以下块的边距框重叠（除非创建新的块格式上下文）。很好的一点是，行框将缩小，因此文本将移动而不是重叠


.bold{
字体大小：粗体；
}
.描述hdr{
宽度：150px；
浮动：左；
清除：左；
}
.desc hdr，
.描述值{
垂直对齐：顶部；
}

一第一标题
Lorem ipsum dolor sit amet。
第二个标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一种便利食品。埃尼安·伊德·利古拉（Aenean id ligula）和奥古斯·阿库姆（augue accumsan maximus）坐在阿梅特·维韦拉·努克（amet viverra nunc）的座位上。前庭妊娠期，nec-commodo-enim-suscipit妊娠期。佩伦茨克
时间元素的开放门。毛里斯的名字来自于人马。佩伦特斯式的弗林蒂利亚·维利特·尼塞尔（Frientesquella velit nisl），是一位有能力完成面部手术的女性。Proin aliquet，arcu在调味品元素，nunc est pharetra est，id
索利西丁尼西多拉酒店。这是一种非常有效的方法。但我的智慧是温和的。
添加
显示：内联块不会自动将这两个元素放在一起。如果两个元素都有空间，它将使它们彼此相隔。尽管如此，你走的是正确的道路；您还可以限制/设置元素的宽度，以“留出所需的空间”

在下面的代码片段中，我没有做任何事情来控制宽度，因此，它们会根据需要填充足够的宽度，而不会给其他元素留出空间。
.inline块{
显示：内联块；
}
Lorem ipsum door sit amet，一位杰出的领导者。埃尼安·廷西德、阿梅特·拉西尼亚·弗雷森、内克·杜尔、阿库的孕妇慈姑。在这一天，我们为威尼斯人做了大量的准备。不，不，不。毛里斯酵母。不要浪费时间。奥奇·里索斯，马蒂斯·维尔纳，维韦拉·维韦拉·奎姆。多内克·阿利奎特、康塞奎特·阿利奎特、胡斯托·韦利特·鲁特鲁姆·利伯罗、马蒂斯·因特杜姆·奥古斯·奥古斯都
在法雷特拉·图尔皮斯权杖上，奎斯克·达皮布斯·麦格纳和洛伦权杖。多洛河的洪水威胁着奥古斯都的饮食效率。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。在hac habitasse Plateum，一句名言。佩伦特斯克埃拉特·奥迪奥（Pellentesquer erat odio）、康斯克特（Consequeat et arcu non）、康格·尤里西斯（congue ultricies enim）。Nam laoreet molestie sem，和pretium eget的尊严。这是一个很好的例子。purus mauris的Vivamus
显示：内联块使文本内容换行

听起来你想要两列

两个div都可以浮动。之后可以清除浮动，返回到在单个列中显示内容

这是CSS

.bold { font-weight: bold; }
.desc-list { overflow: hidden; /* this is to clear the float */ }
.desc-item {
  width: 150px;
}

.col1 { float: left; }    
.col2 { float: right; }

还有HTML标记

<div class="desc-list">
  <div class="desc-item col1">
    <div class="desc-hdr bold">First Header</div>
    <div class="desc-value">Lorem ipsum dolor sit amet.</div>
  </div>
  <div class="desc-item col2">
    <div class="desc-hdr bold">Second Header</div>
    <div class="desc-value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque facilisis sit amet tortor id sodales. Aenean id ligula sed augue accumsan maximus sit amet viverra nunc. Vestibulum gravida volutpat dui, nec commodo enim suscipit gravida. Pellentesque
      porta odio ut tempor elementum. Mauris id ex sed tellus sagittis laoreet. Pellentesque fringilla velit nisl, quis tempus augue consequat id. Etiam aliquet finibus facilisis. Proin aliquet, arcu at condimentum elementum, nunc est pharetra est, id
      sollicitudin nisi dolor a est. Cras efficitur arcu a nibh molestie tincidunt. Ut blandit mi sapien, eget tristique erat varius et.</div>
  </div>
</div>


一第一标题
Lorem ipsum dolor sit amet。
第二个标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一种便利食品。埃尼安·伊德·利古拉（Aenean id ligula）和奥古斯·阿库姆（augue accumsan maximus）坐在阿梅特·维韦拉·努克（amet viverra nunc）的座位上。前庭妊娠期，nec-commodo-enim-suscipit妊娠期。佩伦茨克
时间元素的开放门。毛里斯的名字来自于人马。佩伦茨克弗林蒂利亚韦利特尼斯酒店
.desc-item{
  width: 50%;
}

<div>
</div><div>
</div>