layout: Support vertical-align for inline-blocks.

Improves Twitter.
This commit is contained in:
Patrick Walton 2015-05-08 17:58:42 -07:00
parent 49b73c0bfe
commit 614c877527
4 changed files with 62 additions and 5 deletions

View file

@ -301,6 +301,7 @@ experimental == text_align_start_end.html text_align_start_end_ref.html
== upper_id_attr.html upper_id_attr_ref.html
flaky_cpu,experimental == vertical-lr-blocks.html vertical-lr-blocks_ref.html
== vertical_align_bottom_a.html vertical_align_bottom_ref.html
== vertical_align_inline_block_a.html vertical_align_inline_block_ref.html
== vertical_align_inside_table_a.html vertical_align_inside_table_ref.html
== vertical_align_sub_a.html vertical_align_sub_ref.html
== vertical_align_super_a.html vertical_align_super_ref.html

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
}
#a {
display: inline-block;
vertical-align: top;
width: 128px;
height: 64px;
background: blue;
}
#b {
display: inline-block;
width: 128px;
height: 128px;
background: purple;
}
</style>
</head>
<body>
<div><span id=a></span><span id=b></span></div>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style>
#a {
position: absolute;
width: 128px;
height: 64px;
top: 0;
left: 0;
background: blue;
}
#b {
position: absolute;
width: 128px;
height: 128px;
top: 0;
left: 128px;
background: purple;
}
</style>
</head>
<body>
<div><span id=a></span><span id=b></span></div>
</body>
</html>