之前关于“让我们不支持 display: run-in
因为它很复杂,没有人真正使用或想使用它,”StackOverflow 版……
- display: run-in dropped in Chrome?
- Style a definitition list as simple key value set
- CSS method instead of display:run-in; to position a block inline?
我希望我的文档中的 h5 元素具有以下行为:
- 它的作用类似于
run-in
后跟段落 (p) - 它的作用类似于
block
当后跟标题(h1,...,h6)或其他内容(ul 等)时
这本质上是 same behavior as run-in
如果标题的内容包裹在(或包含)一个 block 中;即,通过更改 <h6>…</h6>
至 <h6><div>…</div></h6>
或 <h6>…<div /></h6>
.
(但是,如果可能的话,我宁愿不要修改 HTML:它是通过 pandoc 从 markdown 生成的。)
这是我目前所拥有的,使用 float 内联 block 。请注意 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 <h5> and <h6> as there is
between the <h4> and <h5>, but it gets “collapsed” because the
<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.
这是一个 demo page从 7 年前开始,我发现尝试(不成功地)伪造相同的行为。
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` margin 行为的假 “correct”,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23411228/