代码之家 › 专栏 › 技术社区 › Sorawee Porncharoenwase

在段落内浮动块级元素

css html

Sorawee Porncharoenwase · 技术社区 · 7 年前

我正在编写一个从高级文档到HTML的编译器。基本上,我想要:

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

编译成以下段落:

Because blah blahÂ¹, it yada yada.

并在段落右侧浮动一个方框,与页边空白注释编号处于同一水平。

我的方法是将其编译为以下HTML:

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

哪里 mg-note-box ul . 当我把 保险商实验室 在页边距注释框中 保险商实验室 元素将被抛出到 span

显而易见的解决办法是改变到 div 以便 保险商实验室 你可以呆在房间里 div p

因为废话废话,这是废话。

Because blah blahÂ¹

, it yada yada.

我想另一个选择是在我的编译器中有一个收集阶段,并将所有空白注释框移到段落之外。这也是不可取的,因为对于较长的段落,页边距注释框的位置将不再匹配页边距注释编号。

更新:我应该提到我的实验 inline-block 也不管用,但也许我做错了。以下是我所做的:

让我们从参考布局开始(该布局功能正常,但不支持块级元素)

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

这导致

| before after             Hello world |

具有 div

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

这导致:

| before                        |
|                               |
| after             Hello world |

具有 跨度 内联块 :

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

这导致:

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

所以,不, 内联块 似乎不起作用。

3 回复 | 直到 7 年前

Community Mohan Dere 5 年前

在段落中处理块元素的要求(这是重要的部分)是问题的根源。

在段落中嵌套块元素是不可能的。 Paragraphs </p> 标签。例如,此HTML:

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

结果:

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

实现您想要的结果的唯一HTML结构是使用内联元素,如 <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;
}

<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>

然而。。。。

<div> 代替包装 <p> . 这样地:

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>

Sorawee Porncharoenwase 7 年前

Pavel Panchekha <p> 到 <div> :使用 <object> 而不是 <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>

-2

Usagi Miyamoto 7 年前

尝试添加 display: inline-block 给你 <span>

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