在段落内浮动块级元素

Question

I'm writing a compiler from a high-level document to HTML. Basically, I want:

Because blah blah{{margin-note|...}}, it yada yada.

to compile to the following paragraph:

Because blah blah¹, it yada yada.

and with a box floating on the right of the paragraph in the same level as the margin note number.

The way I approached this is to compile it to the following HTML:

<p>
  Because blah blah<span class="mg-note-num">1</span><span class="mg-note-box">...</span>, it yada yada.
</p>

where mg-note-box shifts the element to the right of the paragraph. This works really well, except that the margin note box couldn't support block-level elements, like ul . When I put ul inside the margin note box, the ul element will be thrown outside of the span tag.

The obvious fix is to change span to div so that ul can stay inside the div , but this is not an option either because div can't stay inside p . Doing so will break the paragraph into two. Instead of:

Because blah blah¹, it yada yada.

we would have this instead

Because blah blah¹

, it yada yada.

I guess another option is to have a collection phase in my compiler, and move all margin note boxes outside of paragraph. This is also undesirable because for a long paragraph, the position of the margin note boxes will no longer match margin note numbers.

How should I approach this?

---

Update: I should have mentioned that my experiments with inline-block also don't work, but perhaps I did it wrong. Here are what I did:

Let's start with a reference layout (which functions properly but doesn't support block-level elements)

<p>
  before
  <span style="float: right;">Hello world</span>
  after
</p>

This results in

| before after             Hello world |

With div and inline-block :

<p>
  before
  <div style="float: right; display: inline-block;">Hello world</div>
  after
</p>

This results in:

| before                        |
|                               |
| after             Hello world |

With span and inline-block :

<p>
  before
  <span style="float: right; display: inline-block;">
    <ul><li>1</li></ul>
  </span>
  after
</p>

This results in:

| before                        |
|                               |
| - 1                           |
|                               |
| after                         |

So, no, inline-block doesn't seem to work.

Answer 1

The requirement to handle block elements within a paragraph (this is the important part) is the root of the issue.

Nesting a block element in a paragraph is not possible. Paragraphs are block-level elements, and automatically close if another block-level element is parsed before the closing </p> tag. For example, this HTML:

<p>Before<div>Block</div>After</p>

results in:

<p>Before</p>
<div>Block</div>
<p>After</p>

which causes the break around the block element.

The only HTML structure that will achieve the result you want is to use an inline element like a <span> (without any nested block elements). Here's an example:

 p { font-family: Arial; position: relative; padding-right: 120px; } .note-num { font-size: 10px; margin: 0 1px 0 -3px; } .note-content { position: absolute; right: 0; font-size: 12px; max-width: 100px; } 

 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <sup class="note-num">1</sup> <span class="note-content"> Inline Note </span> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 

However....

There's one way we can kinda achieve the result you want, which is to use a <div> in place of the wrapping <p> . Like this:

 p, .p { font-family: Arial; position: relative; padding-right: 120px; } .note-num { font-size: 10px; margin: 0 1px 0 -3px; } .note-content { position: absolute; right: 0; font-size: 12px; max-width: 100px; } .note-content ul { margin: 0; padding: 0; } 

 <div class="p"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <sup class="note-num">1</sup> <span class="note-content"> <ul><li>Block Note</li></ul> </span> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 

Answer 2

My friend, Pavel Panchekha , found another method that doesn't need to change <p> to <div> : use <object> instead of <span> :

 p { font-family: Arial; position: relative; padding-right: 120px; } .note-num { font-size: 10px; margin: 0 1px 0 -3px; } .note-content { position: absolute; right: 0; font-size: 12px; max-width: 100px; } .note-content ul { margin: 0; padding: 0; } 

 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <sup class="note-num">1</sup> <object class="note-content"> <ul><li>Block Note</li></ul> </object> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 

Answer 3

Try adding display: inline-block to your <span> 's style...

See: https://www.w3schools.com/cssref/pr_class_display.asp