html - 内联显示包含 P block 的 DIV

Question

我希望 div.div-block 和 p.div-p 保持默认的 display:block，但是，div-inline 为 display:inline。期望的结果是三个水平 div's，每个都有几个垂直堆叠的 p block 。

我试过 div.div-block div {display:inline;}，但 div.div-inline 仍然是垂直定位的。当我添加 div.div-block div p {display:inline;} 时，div's 是水平的，但是 p's 也是水平的。

<div class="div-block">
    <div class="div-inline">
        <p class="p-block">Bla bla bla</p>
        <p class="p-block">Bla bla bla</p>
    </div>
    <div class="div-inline">
        <p class="p-block">Bla bla bla</p>
        <p class="p-block">Bla bla bla</p>
        <p class="p-block">Bla bla bla</p>
        <p class="p-block">Bla bla bla</p>
    </div>
    <div class="div-inline">
        <p class="p-block">Bla bla bla</p>
    </div>
</div>

Answer 1

您正在寻找的可能是inline-block。如果你让你的 .div-inline 类有 div.div-inline {display:inline-block;}，它们将彼此相邻。当然，环绕仍然有效，所以如果 div 从页面上掉下来，它仍然环绕整个 block 。