[英]Fake `display: run-in` with “correct” margin behavior
Previously on “let's not support display: run-in
because it's complicated and nobody actually uses or wants to use it,” StackOverflow edition… 之前在“让我们不支持
display: run-in
因为它很复杂,没有人真正使用或想要使用它”,StackOverflow版......
I would like the following behavior for h5 elements in my document: 我希望我的文档中的h5元素具有以下行为:
run-in
when followed by a paragraph (p) run-in
后跟一段(p) block
when followed by a heading (h1, …, h6) or something else (ul, etc.) block
一样 This is essentially the same behavior as run-in
if the contents of headings are wrapped in (or contain) a block; 如果标题的内容包含在(或包含)块中
run-in
则这与run-in
基本相同 ; ie, by changing <h6>…</h6>
to <h6><div>…</div></h6>
or <h6>…<div /></h6>
. 即,通过将
<h6>…</h6>
更改为<h6><div>…</div></h6>
或<h6>…<div /></h6>
。
(However, I would prefer not to modify the HTML if possible: it's generated from markdown via pandoc.) (但是,如果可能的话,我宁愿不修改HTML:它是通过pandoc从markdown生成的。)
Here's what I have so far, using floating inline-blocks. 这是我到目前为止所使用的浮动内联块。 Notice how the margin between the h5 and h6 gets “collapsed.”
请注意h5和h6之间的边距是如何“折叠”的。
/* 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;
}
<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. 这是一个包含HTML和CSS的jsfiddle。
Here is one using run-in
for browsers that still support it, like Safari. 这是一个使用
run-in
的浏览器仍然支持它,比如Safari。
Here's a demo page from 7 years ago I found that attempts (unsuccessfully) to fake the same behavior. 这是7年前的一个演示页面 ,我发现尝试(不成功)伪造相同的行为。
Faked: 伪造:
Using run-in
(expected behavior, with correct margins between the h5 and the h6 or ul): 使用
run-in
(预期的行为,在h5和h6或ul之间具有正确的边距):
Maybe i have a compromised you would like : DEMO 也许我有一个妥协你想: 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.