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

Question

So I have some inline-block elements like so:

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

I want them all inline except I want the first p element positioned on top of the other one yet have both together inline with the rest of the span. From what I've been reading, it's bad practice to put a div inside a span, so what's the best way to do this?

Answer 1

It's not "bad practice", it's simply impossible. The browser will "correct" your HTML and it will not behave as expected.

Try using <div style="display:inline-block"> as your container instead.

Answer 2

Here's a wild guess at what you're after based on my comment above.

 .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

As @Neit pointed out, the browser will correct the DOM when you put block-level elements inside inline elements (see first example). A div , or maybe a section is definitely a better choice both for valid and semantic markup.

Using CSS to change display: does work, but it isn't best practice (for example an em in place of your span above will render exactly the same). Certain versions of browsers will also ignore some types of display: changes; thus, your code would fail. So using a better container is going to provide the fewest headaches.

See the code here: https://jsfiddle.net/9mf91b1v/