-
Notifications
You must be signed in to change notification settings - Fork 0
/
tester.html
54 lines (52 loc) · 1.4 KB
/
tester.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
table {
border-colapse: collapse;
text-align: center;
}
th {
border: 1px solid black;
padding: 10px;
font-size: 1em;
}
td {
border: 1px solid black;
padding: 10px;
border-bottom: 2px solid black;
}
p{margin:0 0 1em}
.wrap {display:flex}
.box {
flex:1;
border:1px solid #000;
padding:10px;
}
.box2{flex:2 0 0}
.box img{float:left;
margin:0 10px 10px 0;
max-width:60%;
height:auto;}
</style>
</head>
<body>
<div class="wrap">
<div class="box">flex item</div>
<div class="box box2">
<img src="http://placehold.it/350x150">
<p>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem </p>
</div>
<div class="box">flex item</div>
<div class='box'>
<table>
<th>Hello</th><th>I am</th><th>a table header</th>
<tr><td>And this</td><td>is a </td><td>table row</td></tr>
<tr><td>As you can see</td><td>table rows</td><td>are varying widths</td></tr>
</table>
</div>
</div>
</body>
</html>