8000 csswg-drafts/css-gcpm/uc.html at e0f36323220d485b0858132c9f744158ea7c47e7 · w3c/csswg-drafts · GitHub
Skip to content

uc.html

Latest commit

 

History

History
789 lines (605 loc) · 13.6 KB

uc.html

File metadata and controls

789 lines (605 loc) · 13.6 KB
top:0;
right:0;
width:3gr;
float-wrap:square;}
.figure img {
width:100%; }
.figure .caption {
position:absolute;
bottom:0;
right:0;
float-offset: 100%; }
</pre>
<td>
<p class=comment>(As in the previous example, except that 'vertical-align' is set to 'bottom')
<td>not possible
<tr><td>#28 In a multi-column layout, float an element (containing, say, a quote) to the second column, placing it 10em from the top of the column. The element should fill the width of the column.
<td>
<pre>
quote {
position:absolute;
top:10em;
left:2gr;
width:1gr;
float-wrap:square; }
</pre>
<td>
<pre>
quote {
float: top left column;
float-offset: 2gr 10em;
width: 1gr; }
</pre>
</td>
<td>not possible
<tr><td>#29 as #28, except that the quote should be centered vertically in the column.
<td><pre>
quote {
position:absolute;
top:0.5gr;
left:2gr;
width:1gr;
float-offset:0 50%;
float-wrap:square; }
</pre>
<td>
<pre>
quote {
float: top left column;
float-offset: 2gr 50%;
width: 1gr }
</pre>
<td>not possible
<tr><td>#30 In a multi-column layout, float an element (containing, say, a quote) between the first and second column so that the element intrudes into the two neighboring columns. Horizontally, the element should be centered wrt the column gap which is 1em. Vertically, the quote should be in the middle.
<td><pre>blockquote {
position:absolute;
top:0.5gr;
left:1.5gr;
float-offset:50% 50%;
float-wrap:square; }</pre>
<td>
<pre>
blockquote {
float: top left column;
float-offset: 1.5gr 50% }
</pre>
</td>
<td>not possible
<tr><td>#31 In a four-column layout, the outside column should not have any normal content. Instead, images present in the content should be floated to this column, stacked underneath each other in the order they appear. This use case can also be thought of as a three-column layout with an outside margin equal to the width of one column, into which the images are floated.
<td>
<pre>
html { grid-columns: * (1em *)[3]; }
body {
width: 5gr;
columns: 3; }
img {
position:absolute;
top:0;
right:0;
width:1gr;
float-wrap:square; }
</pre>
<td>
<pre>
@page :left { margin-left: 10em }
@page :right { margin-right: 10em }
body { columns: 3 }
img { float: top outside page }
</pre>
<td>
unsure
<!--<pre>@page :left {
margin-left: 10em;
@sidenote {
position: fixed;
left: -8em;
width: 6em }
}
@page :right {
margin-right: 10em;
@sidenote {
position: fixed;
right: -8em;
width: 6em }
}
body {
width: 30em;
columns: 3 }
img { float: sidenote }
</pre>-->
</table>