For inline-block correctly use min-width

With inline-block elements set the width to max(min width,
specified width) instead of only using the specified width.
This commit is contained in:
Bryan Bell 2015-03-02 20:39:04 -08:00
parent 2f3697f5f3
commit a35ffe1c6e
4 changed files with 59 additions and 5 deletions

View file

@ -156,6 +156,7 @@ fragment=top != ../html/acid2.html acid2_ref.html
== img_block_display_a.html img_block_display_ref.html
== after_block_iteration.html after_block_iteration_ref.html
== inline_block_percentage_height_a.html inline_block_percentage_height_ref.html
== inline_block_min_width.html inline_block_min_width_ref.html
== percentage_height_float_a.html percentage_height_float_ref.html
== img_block_maxwidth_a.html img_block_maxwidth_ref.html
== img_block_maxwidth_b.html img_block_maxwidth_ref.html

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
display: inline-block;
min-width: 200px;
width: 100px;
height: 100px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="red"></div><div class="green"></div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
display: inline-block;
width: 200px;
height: 100px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="red"></div><div class="green"></div>
</body>
</html>