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

编程问答 2022-08-11

问题描述

我想要一个带有图片的标头，其中包含两个文本，并且文档从右到左。 我正在使用行内块显示和宽度百分比来实现12列划分，并且上面提到的三个对象以2 5 5的间距放置（包括代码）。
这是问题所在：
它们以阶梯状的方式排列，而不是串联排列。每个div都比上一个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

解决方法

您可以只使用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>

htmlinline