css - 带有 `display: run-in` 边距行为的假 “correct”

之前在“我们不支持 display: run-in 因为它很复杂，没有人实际使用或想要使用它”，StackOverflow 版本......

Style a definitition list as simple key value set

CSS method instead of display:run-in; to position a block inline?

我希望文档中的 h5 元素具有以下行为:

当后跟一个段落 (p) 时，它的作用类似于 run-in

当后跟标题 (h1, …, h6) 或其他内容 (ul 等) 时，它的作用类似于 block

如果标题的内容包含在(或包含)一个块中，则这本质上是 same behavior as run-in ；即，通过将 <h6>…</h6> 更改为 <h6><div>…</div></h6> 或 <h6>…<div /></h6> 。

(但是，如果可能的话，我不想修改 HTML:它是通过 pandoc 从 Markdown 生成的。)

这是我到目前为止所拥有的，使用 float 内联块。请注意 h5 和 h6 之间的边距如何“折叠”。

CSS

/* Just some basic styles to start off */
body { line-height: 1.5; }
h4,h5,h6 { font-size: 1em; margin: 1em 0; }
h4 { background: #fee; }
h5 { background: #eef; }
h6 { background: #dfd; font-style: italic; font-weight: normal; }

/* Now let’s try to emulate `display: run-in`... */
h4,h5,h6 {
    clear: both;
}
h5 {
    float: left;
    display: inline-block;
    margin: 0 1em 0 0;
}

HTML

<h4>Section</h4>

<h5>Heading</h5>
<p>Paragraph here. This is some text to fill out the line and make it wrap,
so you can get a feel for how a heading with <code>display: run-in;</code>
might look.</p>

<h5>Heading, but without immediately following text</h5>

<h6><div>Subheading</div></h6>
<p>There should be as much space between the &lt;h5> and &lt;h6> as there is
between the &lt;h4> and &lt;h5>, but it gets “collapsed” because the
&lt;h5> floats.</p>

<h5>Heading followed by a list</h5>
<ul><li>A list item</li></ul>

Here is a jsfiddle containing the HTML and CSS.
Here is one using run-in for browsers that still support it, like Safari.

这是 7 年前的 demo page，我发现尝试(不成功)伪造相同的行为。

Safari 的截图

伪造:

使用 run-in(预期行为，在 h5 和 h6 或 ul 之间有正确的边距):

最佳答案

也许我有一个你想要的妥协: DEMO

/* Just some basic styles to start off */
body { line-height: 1.5; }
h4,h5,h6 { font-size: 1em; margin: 1em 0; }
h4 { background: #fee; }
h5 { background: #eef; }
h6 { background: #dfd; font-style: italic; font-weight: normal; }

/* Now let’s try to emulate `display: run-in`... */
* {
 clear:left;
}
h5 {
    float:left;
    display: run-in;
    margin: 0 1em 0 0;

}
h5:after {
    content:'.';
    position:absolute;
    background:inherit;
    width:100%;
    right:0;
    z-index:-1;
}
body {
    position:relative; /* to include defaut margin of body to draw h5:after element within body */
}
p /* + any other phrasing tag you wish */ {
    clear:none;
    background:white;
}

关于css - 带有 `display: run-in` 边距行为的假 “correct”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23411228/