89 lines
3.4 KiB
HTML
89 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Break out of parent element (indented)</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
|
<link rel="stylesheet" href="./style.css">
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<input type="radio" name="rb" id="step0" checked />
|
|
<input type="radio" name="rb" id="step1" />
|
|
<input type="radio" name="rb" id="step2" />
|
|
<input type="radio" name="rb" id="step3" />
|
|
<input type="radio" name="rb" id="step4" />
|
|
<input type="radio" name="rb" id="step5" />
|
|
<input type="radio" name="rb" id="step6" />
|
|
<input type="radio" name="rb" id="step7" />
|
|
|
|
<div class="wrap">
|
|
<div class="breakout">
|
|
<div class="content"><h2>The Great Escape</h2><p></div>
|
|
</div>
|
|
|
|
<pre>
|
|
.breakout {
|
|
<span>/* click next */</span>
|
|
}
|
|
</pre>
|
|
<pre>
|
|
.breakout {
|
|
margin-left: 50%;
|
|
}
|
|
</pre>
|
|
<pre>
|
|
.breakout {
|
|
margin-left: calc(50% - 50vw);
|
|
}
|
|
</pre>
|
|
<pre>
|
|
.breakout {
|
|
margin-left: calc(50% - 50vw);
|
|
padding-left: 50vw;
|
|
}
|
|
</pre>
|
|
<pre>
|
|
.breakout {
|
|
margin-left: calc(50% - 50vw);
|
|
padding-left: calc(50vw - 50%);
|
|
}
|
|
</pre>
|
|
<pre>
|
|
.breakout {
|
|
margin-left: calc(50% - 50vw);
|
|
margin-right: calc(50% - 50vw);
|
|
padding-left: calc(50vw - 50%);
|
|
padding-right: calc(50vw - 50%);
|
|
}
|
|
<span>
|
|
/* ---------------------------
|
|
leave out padding to make
|
|
content stretch to viewport
|
|
--------------------------- */
|
|
</span>
|
|
</pre>
|
|
|
|
|
|
|
|
<div class="next">
|
|
<label for="step1"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg></label>
|
|
<label for="step2"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg></label>
|
|
<label for="step3"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg></label>
|
|
<label for="step4"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg></label>
|
|
<label for="step5"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg></label>
|
|
</div>
|
|
|
|
<div class="prev">
|
|
<label for="step0"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path></svg></label>
|
|
<label for="step1"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path></svg></label>
|
|
<label for="step2"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path></svg></label>
|
|
<label for="step3"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path></svg></label>
|
|
<label for="step4"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path></svg></label>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- partial -->
|
|
|
|
</body>
|
|
</html> |