为什么内联 div 不内联显示？但堆叠成阶梯状

Question

我想要一个带有图像的页眉和两个文本，并且文档从右到左。我正在使用行内块显示和百分比宽度实现 12 列划分，我上面提到的三个对象被放置在 2 5 5 间距（包括代码）。
问题是：
它们以阶梯状排列，而不是直线排列。每个 div 都略低于前一个（由于文档是 rtl，它位于右侧）
我将包含下面的代码
有人可以告诉我我做错了什么吗？

<html dir="rtl" xmlns="http://www.w3.org/1999/html">
<head>
  <style>
    body{
      margin:0px;
    }
    header{
      position:fixed;
      top:0px;
      left:0;
      width:100%;
      height:5%;
    }
    .container-fluid{
      position:relative;
      height:100%;
    }
    .col-5{
      position:relative;
      display:inline-block;
      height:100%;
      margin-right:6px;
      top:0;
      width:40%;
    }
    .col-2{
      position:relative;
      display:inline-block;
      height:100%;
      width:16%;
    }
    .img-cont{
      position:relative;
      height:100%;
      margin-right:auto;
      display:inline-block;
    }
  </style>
</head>
<body>
  <header>
    <div class="container-fluid">
      <div class="col-2">
        <div class="img-cont">
          <img height="100%" src="circle.png"/>
        </div>
      </div>
      <div class="col-5">
        <span style="display:inline-block; font-size:30px; "> سلام </span>
      </div>
      <div class="col-5">
        <span>hello</span>
      </div>
    </div>
  </header>
</body>
</html>

here's a preview

Answer 1

你可以只用display:flex;然后用align-content:center;和justify-content:center;排列。这将对齐 div。

<html dir="rtl" xmlns="http://www.w3.org/1999/html">
<head>
  <style>
    body{
      margin:0px;
    }
    header{
      position:fixed;
      top:0px;
      left:0;
      width:100%;
      height:5%;
    }
    .container-fluid{
      position:relative;
      height:100%;
      display:flex;
      align-content:center;
      justify-content:center;
    }
    .col-5{
      height:100%;
      margin-right:6px;
      width:40%;
    }
    .col-2{
      height:100%;
      width:16%;
    }
    .img-cont{
      height:100%;
      margin-right:auto;
    }
  </style>
</head>
<body>
  <header>
    <div class="container-fluid">
      <div class="col-2">
        <div class="img-cont">
          <img height="100%" src="circle.png"/>
        </div>
      </div>
      <div class="col-5">
        <span style="font-size:30px; "> سلام </span>
      </div>
      <div class="col-5">
        <span>hello</span>
      </div>
    </div>
  </header>
</body>
</html>

为什么内联 div 不内联显示？但堆叠成阶梯状

Why aren't inline divs displayed inline? but stacked in a stair pattern

html

css

inline