| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546 |
- <rml>
- <head>
- <title>Inline-block</title>
- <link type="text/rcss" href="../style.rcss"/>
- <link rel="help" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#inlineblock-width" />
- <link rel="help" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
- <meta name="Description" content="Elements with 'display: inline-block' should shrink-to-fit when no width is specified. The baseline of the element should be the baseline of its last line." />
- <style>
- body {
- background: #ddd;
- color: #444;
- }
- .float {
- color: #393;
- }
- .left {
- float: left;
- }
- .right {
- float: right;
- }
- .iblock {
- display: inline-block;
- color: #33c;
- }
- .iblock p {
- text-align: right;
- }
- </style>
- </head>
- <body>
- <div>The following text <div class="iblock">is an inline-block</div> and should flow naturally.</div>
- <hr/>
- <div>Left filler text <div class="iblock">meets an inline-block<br/>with a line-break</div> right filler text.</div>
- <hr/>
- <div>Left filler text. <div class="iblock">An inline-block. <p>A paragraph</p> Filler text.</div> Right filler text.</div>
- <hr/>
- <div>Left filler text. <div class="iblock">An inline-block. <div class="float right">Float right</div><div class="float left">Float left</div> Filler text.</div> Right filler text.</div>
- <hr/>
- <div class="iblock">Nesting inline-blocks:
- <div class="iblock">A<div class="iblock">B<div class="iblock">C</div></div></div>
- <div class="iblock">D<div class="iblock">E<div class="iblock">F</div></div></div>
- </div>
- </body>
- </rml>
|