盒子里有内容时, 是内容与内容的顶部对齐
盒子里无内容时, 是内容与内容的底部对齐
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style type="text/CSS">
- *{padding:0;margin:0;}
- </style>
- </head>
- <body>
- <div style="display: inline-block;height:50px;width:100px;background:red;">444</div>
- <div style="display: inline-block;height:40px;width:100px;background:red;">44444</div>
- <div style="display: inline-block;height:60px;width:100px;background:red;border-top:5px solid green;">44444</div>
- <div style="display: inline-block;height:50px;width:100px;background:red;"></div>
- <div style="display: inline-block;height:40px;width:100px;background:red;"></div>
- <div style="display: inline-block;height:60px;width:100px;background:red;border-top:5px solid green;"></div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/40901/18d2a55939fa0feca26a7bb29cd28620.html