Skip to content

Commit 05e6b88

Browse files
rachelandrewrachelandrew
committed
files for two values of display
1 parent 07c4ed8 commit 05e6b88

File tree

5 files changed

+670
-0
lines changed

5 files changed

+670
-0
lines changed

‎display/two-value/block-flow-root.html

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Two Values of Display: display: flow-root</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
background-color: #F4F7F8;
20+
border: none;
21+
border-left: 6px solid #558ABB;
22+
color: #4D4E53;
23+
width: 90%;
24+
max-width: 700px;
25+
padding: 10px 10px 0px;
26+
font-size: 90%;
27+
}
28+
29+
textarea:nth-of-type(1) {
30+
height: 80px
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 160px
35+
}
36+
37+
.playable-buttons {
38+
text-align: right;
39+
width: 90%;
40+
max-width: 700px;
41+
padding: 5px 10px 5px 26px;
42+
font-size: 100%;
43+
}
44+
45+
section {
46+
width: 90%;
47+
max-width: 700px;
48+
border: 1px solid #4D4E53;
49+
border-radius: 2px;
50+
padding: 10px 14px 10px 10px;
51+
margin-bottom: 10px;
52+
display: flow-root;
53+
}
54+
55+
section input {
56+
display: block;
57+
margin: 5px;
58+
}
59+
60+
.container {
61+
background-color: #333;
62+
color: #fff;
63+
}
64+
65+
.item {
66+
background-color: #fff;
67+
border: 1px solid #999;
68+
color: #333;
69+
width: 100px;
70+
height: 100px;
71+
padding: 10px;
72+
}
73+
74+
75+
</style>
76+
<style class="editable">
77+
.container {
78+
display: flow-root;
79+
}
80+
81+
.item {
82+
margin: 10px;
83+
float: left;
84+
}
85+
</style>
86+
</head>
87+
88+
<body>
89+
<section>
90+
<div class="container">
91+
<div class="item">Floated</div>
92+
<p>Text following the float.</p>
93+
</div>
94+
95+
</section>
96+
<textarea class="playable-css" style="height: 180px">
97+
.container {
98+
display: flow-root;
99+
}
100+
101+
.item {
102+
margin: 10px;
103+
float: left;
104+
}
105+
</textarea>
106+
<textarea id="code" class="playable-html">
107+
<div class="container">
108+
<div class="item">Floated</div>
109+
<p>Text following the float.</p>
110+
</div>
111+
</textarea>
112+
<div class="playable-buttons">
113+
<input id="reset" type="button" value="Reset">
114+
</div>
115+
</body>
116+
<script>
117+
var section = document.querySelector('section');
118+
var editable = document.querySelector('.editable');
119+
var textareaHTML = document.querySelector('.playable-html');
120+
var textareaCSS = document.querySelector('.playable-css');
121+
var reset = document.getElementById('reset');
122+
var htmlCode = textareaHTML.value;
123+
var cssCode = textareaCSS.value;
124+
125+
function fillCode() {
126+
editable.innerHTML = textareaCSS.value;
127+
section.innerHTML = textareaHTML.value;
128+
}
129+
130+
reset.addEventListener('click', function () {
131+
textareaHTML.value = htmlCode;
132+
textareaCSS.value = cssCode;
133+
fillCode();
134+
});
135+
136+
textareaHTML.addEventListener('input', fillCode);
137+
textareaCSS.addEventListener('input', fillCode);
138+
window.addEventListener('load', fillCode);
139+
</script>
140+
141+
</html>

‎display/two-value/inline-block.html

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Two Values of Display: display: inline-block</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
background-color: #F4F7F8;
20+
border: none;
21+
border-left: 6px solid #558ABB;
22+
color: #4D4E53;
23+
width: 90%;
24+
max-width: 700px;
25+
padding: 10px 10px 0px;
26+
font-size: 90%;
27+
}
28+
29+
textarea:nth-of-type(1) {
30+
height: 80px
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 160px
35+
}
36+
37+
.playable-buttons {
38+
text-align: right;
39+
width: 90%;
40+
max-width: 700px;
41+
padding: 5px 10px 5px 26px;
42+
font-size: 100%;
43+
}
44+
45+
section {
46+
width: 90%;
47+
max-width: 700px;
48+
border: 1px solid #4D4E53;
49+
border-radius: 2px;
50+
padding: 10px 14px 10px 10px;
51+
margin-bottom: 10px;
52+
display: flow-root;
53+
}
54+
55+
section input {
56+
display: block;
57+
margin: 5px;
58+
}
59+
60+
p {
61+
width: 300px;
62+
}
63+
64+
65+
</style>
66+
<style class="editable">
67+
.ib {
68+
background-color: rgba(0,0,0,.4);
69+
color: #fff;
70+
padding: 10px;
71+
display: inline-block;
72+
}
73+
</style>
74+
</head>
75+
76+
<body>
77+
<section>
78+
<p>This paragraph has a span <span class="ib">with padding</span> it is an inline-block so the padding is contained and pushes the other line boxes away.</p>
79+
80+
</section>
81+
<textarea class="playable-css" style="height: 180px">
82+
.ib {
83+
background-color: rgba(0,0,0,.4);
84+
color: #fff;
85+
padding: 10px;
86+
display: inline-block;
87+
}
88+
</textarea>
89+
<textarea id="code" class="playable-html">
90+
<p>This paragraph has a span <span class="ib">with padding</span> it is an inline-block so the padding is contained and pushes the other line boxes away.</p>
91+
</textarea>
92+
<div class="playable-buttons">
93+
<input id="reset" type="button" value="Reset">
94+
</div>
95+
</body>
96+
<script>
97+
var section = document.querySelector('section');
98+
var editable = document.querySelector('.editable');
99+
var textareaHTML = document.querySelector('.playable-html');
100+
var textareaCSS = document.querySelector('.playable-css');
101+
var reset = document.getElementById('reset');
102+
var htmlCode = textareaHTML.value;
103+
var cssCode = textareaCSS.value;
104+
105+
function fillCode() {
106+
editable.innerHTML = textareaCSS.value;
107+
section.innerHTML = textareaHTML.value;
108+
}
109+
110+
reset.addEventListener('click', function () {
111+
textareaHTML.value = htmlCode;
112+
textareaCSS.value = cssCode;
113+
fillCode();
114+
});
115+
116+
textareaHTML.addEventListener('input', fillCode);
117+
textareaCSS.addEventListener('input', fillCode);
118+
window.addEventListener('load', fillCode);
119+
</script>
120+
121+
</html>

‎display/two-value/inline-flex.html

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Two Values of Display: an inline flex container</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
background-color: #F4F7F8;
20+
border: none;
21+
border-left: 6px solid #558ABB;
22+
color: #4D4E53;
23+
width: 90%;
24+
max-width: 700px;
25+
padding: 10px 10px 0px;
26+
font-size: 90%;
27+
}
28+
29+
textarea:nth-of-type(1) {
30+
height: 80px
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 160px
35+
}
36+
37+
.playable-buttons {
38+
text-align: right;
39+
width: 90%;
40+
max-width: 700px;
41+
padding: 5px 10px 5px 26px;
42+
font-size: 100%;
43+
}
44+
45+
section {
46+
width: 90%;
47+
max-width: 700px;
48+
border: 1px solid #4D4E53;
49+
border-radius: 2px;
50+
padding: 10px 14px 10px 10px;
51+
margin-bottom: 10px;
52+
}
53+
54+
section input {
55+
display: block;
56+
margin: 5px;
57+
}
58+
59+
.flex > div {
60+
border: 2px solid rgb(96, 139, 168);
61+
border-radius: 5px;
62+
background-color: rgba(96, 139, 168, .2);
63+
}
64+
65+
66+
</style>
67+
<style class="editable">
68+
.flex {
69+
border: 5px solid #ccc;
70+
display: inline-flex;
71+
}
72+
</style>
73+
</head>
74+
75+
<body>
76+
<section>
77+
<div class="flex">
78+
<div>One</div>
79+
<div>Two</div>
80+
</div>
81+
Text following the flex container.
82+
83+
</section>
84+
<textarea class="playable-css">
85+
.flex {
86+
border: 5px solid #ccc;
87+
display: inline-flex;
88+
}
89+
</textarea>
90+
<textarea id="code" class="playable-html">
91+
<div class="flex">
92+
<div>One</div>
93+
<div>Two</div>
94+
</div>
95+
Text following the flex container.
96+
</textarea>
97+
<div class="playable-buttons">
98+
<input id="reset" type="button" value="Reset">
99+
</div>
100+
</body>
101+
<script>
102+
var section = document.querySelector('section');
103+
var editable = document.querySelector('.editable');
104+
var textareaHTML = document.querySelector('.playable-html');
105+
var textareaCSS = document.querySelector('.playable-css');
106+
var reset = document.getElementById('reset');
107+
var htmlCode = textareaHTML.value;
108+
var cssCode = textareaCSS.value;
109+
110+
function fillCode() {
111+
editable.innerHTML = textareaCSS.value;
112+
section.innerHTML = textareaHTML.value;
113+
}
114+
115+
reset.addEventListener('click', function () {
116+
textareaHTML.value = htmlCode;
117+
textareaCSS.value = cssCode;
118+
fillCode();
119+
});
120+
121+
textareaHTML.addEventListener('input', fillCode);
122+
textareaCSS.addEventListener('input', fillCode);
123+
window.addEventListener('load', fillCode);
124+
</script>
125+
126+
</html>

0 commit comments

Comments
 (0)