Skip to content

Commit 86e197a

Browse files
rachelandrewrachelandrew
committed
floated version of media objects
1 parent 216cde9 commit 86e197a

File tree

2 files changed

+522
-0
lines changed

2 files changed

+522
-0
lines changed

‎css-cookbook/media-objects-fallback--download.html‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
<!-- this is an example from the MDN Layout Cookbook -->
8+
<title>CSS Cookbook: media objects</title>
9+
10+
<style>
11+
body {
12+
background-color: #fff;
13+
color: #333;
14+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
15+
padding: 0;
16+
margin: 0;
17+
}
18+
19+
img {
20+
max-width: 100%;
21+
display: block;
22+
}
23+
24+
p {
25+
margin: 0 0 1em 0;
26+
}
27+
28+
@media (min-width: 500px) {
29+
30+
/* clearfix*/
31+
.media:after {
32+
content: "";
33+
display: table;
34+
clear: both;
35+
}
36+
37+
.media {
38+
display: grid;
39+
grid-template-columns: fit-content(200px) 1fr;
40+
grid-template-rows: 1fr auto;
41+
grid-template-areas:
42+
"image content"
43+
"image footer";
44+
grid-gap: 20px;
45+
margin-bottom: 4em;
46+
}
47+
48+
.media-flip {
49+
grid-template-columns: 1fr fit-content(200px);
50+
grid-template-areas:
51+
"content image"
52+
"footer image";
53+
}
54+
55+
.media>.media {
56+
grid-column-start: 2;
57+
clear: both;
58+
}
59+
60+
.media-flip>.media {
61+
grid-column-start: 1;
62+
}
63+
64+
.img {
65+
float: left;
66+
margin-right: 20px;
67+
max-width: 200px;
68+
grid-area: image;
69+
}
70+
71+
.media-flip .img {
72+
float: right;
73+
margin: 0 0 0 20px;
74+
}
75+
76+
.content {
77+
grid-area: content;
78+
}
79+
80+
.footer {
81+
grid-area: footer;
82+
}
83+
84+
@supports(display: grid) {
85+
.media:after {
86+
content: none;
87+
}
88+
89+
.img,
90+
.media-flip .img {
91+
max-width: 100%;
92+
margin: 0;
93+
94+
}
95+
}
96+
}
97+
</style>
98+
99+
</head>
100+
101+
<body>
102+
103+
<div class="media">
104+
105+
<div class="img">
106+
<img src="balloon-sq2.jpg" alt="Balloons">
107+
</div>
108+
109+
<div class="content">
110+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
111+
maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
112+
aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
113+
condimentum.</p>
114+
</div>
115+
<div class="footer">
116+
An optional footer goes here.
117+
</div>
118+
</div>
119+
120+
<div class="media">
121+
122+
<div class="img">
123+
<img src="sharp-account_box-24px.svg" width="80px" alt="Account">
124+
</div>
125+
<div class="content">
126+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
127+
maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
128+
aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
129+
condimentum.</p>
130+
</div>
131+
<div class="footer"></div>
132+
</div>
133+
134+
<div class="media media-flip">
135+
136+
<div class="img">
137+
<img src="balloon-sq2.jpg" alt="Balloons">
138+
</div>
139+
140+
<div class="content">
141+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
142+
maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
143+
aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
144+
condimentum.</p>
145+
</div>
146+
<div class="footer">
147+
An optional footer goes here.
148+
</div>
149+
</div>
150+
151+
<div class="media">
152+
153+
<a class="img">
154+
<img src="balloon-sq2.jpg" alt="Balloons">
155+
</a>
156+
157+
<div class="content">
158+
159+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
160+
maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
161+
aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
162+
condimentum.</p>
163+
</div>
164+
165+
<div class="footer"></div>
166+
167+
<div class="media">
168+
169+
<a class="img">
170+
<img src="balloon-sq2.jpg" alt="Balloons">
171+
</a>
172+
173+
<div class="content">
174+
175+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
176+
maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales
177+
tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor
178+
venenatis condimentum.</p>
179+
</div>
180+
181+
<div class="footer"></div>
182+
183+
</div>
184+
185+
</div>
186+
187+
188+
189+
190+
</html>

0 commit comments

Comments
 (0)