在内联块跨度内将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:将呈现完全相同的）。某些版本的浏览器也会忽略某些类型的{{1}}更改;因此，您的代码将失败。因此，使用更好的容器会带来最少的麻烦。

请参阅此处的代码： https://jsfiddle.net/9mf91b1v/