我希望 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>
最佳答案
您正在寻找的可能是inline-block
。如果你让你的 .div-inline
类有 div.div-inline {display:inline-block;}
,它们将彼此相邻。当然,环绕仍然有效,所以如果 div 从页面上掉下来,它仍然环绕整个 block 。
关于html - 内联显示包含 P block 的 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22381398/