在內聯塊范圍內將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/