| <!DOCTYPE html> |
| <!-- |
| | The baseline of an "inline-block" is the baseline of its last line box |
| | in the normal flow, unless it has no in-flow line boxes. |
| | https://www.w3.org/TR/CSS21/visudet.html#line-height |
| --> |
| <html> |
| <head> |
| <style> |
| body { |
| color: #3f51b5; |
| font-family: Roboto; |
| font-size: 50px; |
| font-weight: bold; |
| } |
| .middle-inline-block { |
| color: #03a9f4; |
| display: inline-block; |
| margin-top: 50px; |
| } |
| .middle-block { |
| background-color: #03a9f4; |
| height: 50px; |
| } |
| .right-inline-block { |
| color: #fff; |
| display: inline-block; |
| } |
| .right-block { |
| background-color: #009688; |
| } |
| </style> |
| </head> |
| <body> |
| 1st line |
| <div class="middle-inline-block"> |
| 1st line |
| <div class="middle-block"></div> |
| 3rd line |
| <div class="middle-block"></div> |
| </div> |
| <div class="right-inline-block"> |
| <div class="right-block">1st line</div> |
| </div> |
| </body> |
| </html> |
