两个水平排列的div顶部对齐~详细

文章目录

    • 效果
    • 核心代码
    • 完整代码示例

效果

div顶部对齐的效果图如下:
两个水平排列的div顶部对齐~详细_第1张图片

核心代码

把想要顶部对齐的div加上如下样式:

 display: inline-block;
 vertical-align: top;

完整代码示例

完整示例代码


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>div顶部水平对齐title>
    <style>
      .one {
      
        width: 200px;
        height: 200px;
        background-color: aqua;
        display: inline-block;
        vertical-align: top;
      }
      .two {
      
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        display: inline-block;
        vertical-align: top;
      }
      .three {
      
        width: 200px;
        height: 200px;
        background-color: coral;
        display: inline-block;
        vertical-align: top;
      }
    style>
  head>
  <body>
    <div class="one">onediv>
    <div class="two">twodiv>
    <div class="three">threediv>
  body>
html>

你可能感兴趣的:(CSS)