73283
Question:
Previously on “let’s not support display: run-in because it’s complicated and nobody actually uses or wants to use it,” StackOverflow edition…
I would like the following behavior for h5 elements in my document:
<ul><li>It acts likerun-in when followed by a paragraph (p)</li>
<li>It acts like block when followed by a heading (h1, …, h6) or something else (ul, etc.)</li>
</ul>This is essentially the <a href="http://www.w3.org/TR/css3-box/#run-in-boxes" rel="nofollow">same behavior as run-in</a> if the contents of headings are wrapped in (or contain) a block; i.e., by changing <h6>…</h6> to <h6><div>…</div></h6> or <h6>…<div /></h6>.
(However, I would prefer not to modify the HTML if possible: it’s generated from markdown via pandoc.)
Here’s what I have so far, using floating inline-blocks. Notice how the margin between the h5 and h6 gets “collapsed.”
<h3>CSS</h3>/* 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;
}
<h3>HTML</h3>
<h4>Section</h4>
<h5>Heading</h5>
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 display: run-in;
might look.
<h5>Heading, but without immediately following text</h5>
<h6><div>Subheading</div></h6>
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.
<h5>Heading followed by a list</h5>
<ul><li>A list item</li></ul>
<a href="http://jsfiddle.net/47W2C/12/" rel="nofollow">Here is a jsfiddle containing the HTML and CSS.</a><br /><a href="http://jsfiddle.net/47W2C/14/" rel="nofollow">Here is one using run-in for browsers that still support it, like Safari.</a>
Here’s a <a href="http://www.cl.cam.ac.uk/~jf15/StyleTests/Fake-run-in.html" rel="nofollow">demo page</a> from 7 years ago I found that attempts (unsuccessfully) to fake the same behavior.
<h2>Screenshots of Safari</h2>Faked:
<blockquote><img width="548" class="b-lazy" data-src="https://i.stack.imgur.com/WeGTJ.png" data-original="https://i.stack.imgur.com/WeGTJ.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />
</blockquote>Using run-in (expected behavior, with correct margins between the h5 and the h6 or ul):
<img width="548" class="b-lazy" data-src="https://i.stack.imgur.com/FtrYs.png" data-original="https://i.stack.imgur.com/FtrYs.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />
</blockquote> Answer1:Maybe i have a compromised you would like : <strong><a href="http://jsfiddle.net/47W2C/20/" rel="nofollow">DEMO</a></strong><br />
/* 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;
}
