CSS如何将内联块元素与容器顶部对齐-之路教程

创建 HTML

创建一个具有“容器”类的 <div> 元素。
在“容器”中创建两个具有“small-box”和“big-box”类的 <span> 元素。

<div class="container">
  <span class="small-box"></span>
  <span class="big-box"></span>
</div>

添加 CSS

设置“容器”的边框、高度和宽度。
将显示设置为“inline-block”并指定“container”和<span>的边框和宽度
设置“小盒子”和“大盒子”的高度和背景。

.container {
  border: 1px solid #666666;
  width: 350px;
  height: 150px;
}
.container span {
  display: inline-block;
  border: 1px solid #666666;
  width: 40%;
}
.small-box {
  height: 30%;
  background: #1c87c9;
}
.big-box {
  height: 50%;
  background: #8ebf42;
}

这是最终的结果。

创建两个内联块元素的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .container {
        border: 1px solid #666666;
        width: 350px;
        height: 150px;
      }
      .container span {
        display: inline-block;
        border: 1px solid #666666;
        width: 40%;
      }
      .small-box {
        height: 30%;
        background: #1c87c9;
      }
      .big-box {
        height: 50%;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <span class="small-box"></span>
      <span class="big-box"></span>
    </div>
  </body>
</html>

我们的问题是将“小盒子”与容器顶部对齐。
Vertical-align 属性的“top”值可以帮助我们解决这个问题。

vertical-align 属性定义了内联元素的垂直对齐方式。
“top”值将对齐的子树的顶部与行框的顶部对齐。

我们必须将 vertical-align 属性应用到“small-box”，才能让它从容器的顶部开始。

.small-box {
  vertical-align: top;
}

所以，现在我们的问题只用一个 CSS 属性就解决了。
让我们看看完整的代码。

使用 vertical-align 属性将内联块元素与容器顶部对齐的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .container {
        border: 1px solid #666666;
        width: 350px;
        height: 150px;
      }
      .container span {
        display: inline-block;
        border: 1px solid #666666;
        width: 40%;
      }
      .small-box {
        height: 30%;
        background: #1c87c9;
        vertical-align: top;
      }
      .big-box {
        height: 50%;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <span class="small-box"></span>
      <span class="big-box"></span>
    </div>
  </body>
</html>

让我们看另一个示例，其中一个 <span> 元素的高度大于其余 <li> 元素的高度。

这是发生错误的示例。

将内联块元素与容器顶部对齐并出现错误的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      #box-one {
        background-color: #1c87c9;
      }
      #box-two {
        background-color: #8ebf42;
      }
      #box-three {
        background-color: #cccccc;
      }
      #box-four {
        background-color: #666666;
      }
      .normal {
        height: 100px;
        width: 100px;
        display: inline-block;
      }
      .big {
        height: 200px;
        width: 200px;
        display: inline-block;
      }
      ul li {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <span id="box-one" class="normal">Blue</span>
      </li>
      <li>
        <span id="box-two" class="normal">Green</span>
      </li>
      <li>
        <span id="box-three" class="normal">Grey</span>
      </li>
      <li>
        <span id="box-four" class="big">
        今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
        </span>
      </li>
    </ul>
  </body>
</html>

我们只需要用 float 属性替换 display 属性。

将浮动属性设置为“左”。
因此，在我们的示例中，我们使用 float 属性，它在大多数情况下与元素的 clear 属性一起使用。

它指定哪些元素可以漂浮在清除元素旁边以及在哪一侧。
其中我们将clear设置为“both”，这意味着左右两边都不允许浮动元素。

使用 float 属性将内联块元素与容器顶部对齐的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      #box-one {
        background-color: #1c87c9;
      }
      #box-two {
        background-color: #8ebf42;
      }
      #box-three {
        background-color: #cccccc;
      }
      #box-four {
        background-color: #666666;
      }
      .normal {
        height: 100px;
        width: 100px;
        display: inline-block;
      }
      .big {
        height: 200px;
        width: 200px;
        display: inline-block;
      }
      ul {
        clear: both;
        content: "";
        display: table;
      }
      ul li {
        float: left;
        list-style-type: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <span id="box-one" class="normal">Blue</span>
      </li>
      <li>
        <span id="box-two" class="normal">Green</span>
      </li>
      <li>
        <span id="box-three" class="normal">Grey</span>
      </li>
      <li>
        <span id="box-four" class="big">
       今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
        </span>
      </li>
    </ul>
  </body>
</html>

在以下示例中，我们使用 display 属性的“flex”值对齐内联块级元素，该值与 -Webkitextension 一起使用。

使用 display 属性的“flex”值将内联块元素与容器顶部对齐的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div {
        color: #ffffff;
        display: flex;
        display: -webkit-flex;
        align-items: flex-start;
        -webkit-align-items: flex-start;
      }
      #box-one {
        background-color: #1c87c9;
      }
      #box-two {
        background-color: #8ebf42;
      }
      #box-three {
        background-color: #cccccc;
      }
      #box-four {
        background-color: #666666;
      }
      .normal {
        height: 100px;
        width: 100px;
        display: inline-block;
      }
      .big {
        height: 200px;
        width: 200px;
        display: inline-block;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div>
      <span id="box-one" class="normal">Blue</span>
      <strong id="box-two" class="normal">Green
      <span id="box-three" class="normal">Grey</span>
      <span id="box-four" class="big">
      今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
      </span>
    </div>
  </body>
</html>

CSS如何将内联块元素与容器顶部对齐

许多开发人员在对齐行内块元素方面存在问题。
问题是当一些内联块元素具有不同的高度时，为什么它们中较短的元素没有与容器的顶部对齐？
我们将在 CSS 属性的帮助下展示这个问题的解决方案。

让我们在下面讨论一个例子。

日期：2020-06-02 22:14:56 来源：oir作者：oir

←如何并排对齐 Div

如何在 HTML 中对齐输入字段的占位符文本→