Question

嗨！我想在一个响应式网站的DIV（名称和工作位置）中放置两个段落。

.header {
  min-height: 56px;
  transition: min-height 0.3s;
  max-width: 800px;
}

.header__inner {
  margin-left: auto;
  margin-right: auto;
  float: left;
  border: 3px solid #73AD21;
  display: inline;
}

.header__text {
  float: right;
  border: 3px solid #73AD21;
  display: inline;
}

<header class="header">
  <div class="header">
    <div class="header__inner">
      <img class="header__logo" src="logo.jpg" alt="Logo">
    </div>
    <div class="header__text">
      <p class="header__title">
        NAME
      </p>
      <p class="header__subtitle">
        CURRENT POSITION
      </p>
    </div>
  </div>
</header>

每当我开始使用不同大小的屏幕时，两个段落都会随机切换位置。我怎样才能确保它们保持有序？

这是页面的外观 Page with misplaced texts

这就是我想要完成的事情

what I want to do

Answer 1

您似乎没有为要切换其位置的两个元素header__title和header__subtitle发布CSS。但显然他们都是正确的。要确保header__subtitle的{{1}}未显示在header__title的左侧，即使有足够的空间，也可以添加以下内容：

.header__subtitle {
  clear: right;
}

两段改变DIV内的位置

1 个答案: