Skip to content

Commit 0f364c7

Browse files
chrisdavidmillschrisdavidmills
committed
adding contain examples
1 parent 6d69b8b commit 0f364c7

File tree

6 files changed

+90
-0
lines changed

6 files changed

+90
-0
lines changed

‎contain/contain-fix.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Float interference</title>
6+
<style>
7+
img {
8+
float: left;
9+
border: 3px solid black;
10+
}
11+
12+
article {
13+
border: 1px solid black;
14+
contain: content;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<h1>My blog</h1>
20+
<article>
21+
<h2>Heading of a nice article</h2>
22+
<p>Content here.</p>
23+
<img src="placeholder-2.jpg" alt="I just showed up">
24+
</article>
25+
<article>
26+
<h2>Another heading of another article</h2>
27+
<img src="placeholder-1.jpg" alt="placeholder">
28+
<p>More content here.</p>
29+
</article>
30+
</body>
31+
</html>

‎contain/float-interference.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Float interference</title>
6+
<style>
7+
img {
8+
float: left;
9+
border: 3px solid black;
10+
}
11+
12+
article {
13+
border: 1px solid black;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<h1>My blog</h1>
19+
<article>
20+
<h2>Heading of a nice article</h2>
21+
<p>Content here.</p>
22+
<img src="placeholder-2.jpg" alt="I just showed up">
23+
</article>
24+
<article>
25+
<h2>Another heading of another article</h2>
26+
<img src="placeholder-1.jpg" alt="placeholder">
27+
<p>More content here.</p>
28+
</article>
29+
</body>
30+
</html>

‎placeholder-images/placeholder-100.jpg renamed to ‎contain/placeholder-1.jpg

File renamed without changes.

‎placeholder-images/placeholder-150.jpg renamed to ‎contain/placeholder-2.jpg

File renamed without changes.

‎contain/simple-layout.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Simple layout</title>
6+
<style>
7+
img {
8+
float: left;
9+
border: 3px solid black;
10+
}
11+
12+
article {
13+
border: 1px solid black;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<h1>My blog</h1>
19+
<article>
20+
<h2>Heading of a nice article</h2>
21+
<p>Content here.</p>
22+
</article>
23+
<article>
24+
<h2>Another heading of another article</h2>
25+
<img src="placeholder-1.jpg" alt="placeholder">
26+
<p>More content here.</p>
27+
</article>
28+
</body>
29+
</html>

‎placeholder-images/placeholder-200.jpg

-2.9 KB
Binary file not shown.

0 commit comments

Comments
 (0)