在内联块范围内将p个元素显示为块

Question

所以我有一些内联块元素，例如：

<span style="display: inline-block">
  <img>
  <p>Some text</p>
  <p>Some more text</p>
  <button>A button</button>
</span>

我希望它们全部内联，除了我希望第一个p元素位于另一个之上，而又将它们与范围的其余部分一起内联。 从我一直在阅读的内容来看，将div放在跨度中是不好的做法，那么什么是最好的方法呢？

Answer 1

这不是“坏习惯”，根本不可能。 浏览器将“更正”您的HTML，并且不会按预期运行。

请尝试使用<div style="display:inline-block">作为容器。

Answer 2

根据以上我的评论，这是对您要追求的目标的一个疯狂猜测。

 .table { display: table; width: 100%; } .row { display: table-row; } .cell { display: table-cell; padding: 5px; background: #ddd; border: 1px solid #aaa; vertical-align: top; } 

 <div class="table"> <div class="row"> <div class="cell"> <img src="http://lorempixel.com/300/200" /> </div> <div class="cell"> <div class="table"> <div class="row"> <div class="cell"> <p>Paragraph one. Paragraph one. Paragraph one.</p> </div> </div> <div class="row"> <div class="cell"> <p>Paragraph two. Paragraph two. Paragraph two.</p> </div> </div> </div> </div> <div class="cell"> <button>Button</button> </div> </div> </div> 

Answer 3

正如@Neit所指出的，将块级元素放入内联元素中时，浏览器将纠正DOM（请参见第一个示例）。 对于有效标记和语义标记， div或section绝对是更好的选择。

使用CSS更改display: 确实可以，但是不是最佳实践（例如，用em代替上方的span将呈现完全相同的效果）。 某些版本的浏览器还将忽略某些display:类型display:更改； 因此，您的代码将失败。 因此，使用更好的容器可以减少最少的麻烦。

在此处查看代码： https : //jsfiddle.net/9mf91b1v/