位置跨度彼此相邻答案

【问题标题】：Position spans next to each other位置跨度彼此相邻
【发布时间】：2020-11-03 06:50:21
【问题描述】：

我想要做的是有一个固定的页眉，固定的页脚，中间有一个部分。如果内容不适合屏幕，则中间部分将获得滚动条。在经历了很多挫折之后，我设法在不使用表格的情况下正确地渲染了主布局：

.main-container {
  width: 50%;
  height: 98vh;
  flex-direction: column;
  display: flex;
}

.main-container .main-view {
  width: 100%;
  overflow-y: scroll;
  flex: 1 1 auto;
}

.main-container .top-bar {
  width: 100%;
  flex: 0 0 1em;
  text-align: center;
}

.main-container .bottom-bar {
  width: 100%;
  flex: 0 0 1em;
}

.special {
  display: inline;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
</head>

<body>
  <div class="main-container">
    <div class="main-container top-bar">
      SOMETHING FIXED HERE
    </div>
    <div class="main-container main-view">
      <span class="special">Lorem</span><span class="special">ipsum</span> dolor sit amet, consectetur adipiscing elit. Pellentesque magna tellus, dictum et luctus ac, laoreet vel justo. Cras at pretium lectus. Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Suspendisse potenti. Maecenas tincidunt efficitur neque, eu elementum purus tincidunt vel. Nunc id dolor bibendum, pharetra erat in, pretium lorem. Donec vitae nulla et lacus porta scelerisque. Praesent blandit, nibh nec vulputate
      semper, arcu odio scelerisque velit, at rhoncus lacus dui luctus sapien. Donec venenatis erat libero, vitae lobortis velit finibus ut.
    </div>
    <div class="main-container bottom-bar" id="bottom-bar">
      SOMETHING FIXED HERE
    </div>
  </div>
</body>

</html>

然而，中间区域的元素只有在没有被任何类型的标签包裹时才能正确呈现。一旦我将它们包装在 div 或 span 中，浏览器（至少是 Chrome）就会坚持让每个标签占据整行。它们并没有像我预期的那样并排显示。

我已尝试创建一个“特殊”类，如上例所述，我已将其应用于 div 和 span。两者都给出相同的结果：“Lorem”和“ipsum”出现在各自的行上，而不是并排出现。我尝试了其他堆栈溢出问题中有关某些相关主题的各种事情，包括“float：left”和使用“display：flex”的额外嵌套。

我只是想应用一些样式，也许让一些项目可点击。为此，它们需要被包裹在 div 或 span 之类的东西中。任何人都知道我怎样才能让它并排呈现它们而不是每个标签在自己的行上？

【问题讨论】：

标签： html css

【解决方案1】：

您的特殊问题是因为您的 .main-container 类上有 display: flex;，然后您将该类添加到顶部、中心和底部 div，此 flex 属性更改了子元素的定位方式。

听起来您不想弄乱主（中间）div 的子元素的位置，因此您不想将“main-container”类添加到该 div。

其实，你可以更简单地实现你想要的：

      body {
        display: flex;
        flex-direction: column;
        height: 100vh;
      }
      
      .main-view {
        flex-grow: 1;
        overflow: scroll;
      }

在这里，我们使主体始终为 100vh（100% 视口高度）并将显示更改为 flex，方向列。设置这些 flex 属性可以让我们将 main-view 容器告诉 flex-grow，这意味着填充父级的剩余空间，这会将页脚向下推到 body 元素的底部（设置为 100vh）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
      body {
        display: flex;
        flex-direction: column;
        height: 100vh;
      }
      
      .main-view {
        flex-grow: 1;
        overflow: scroll;
      }
    </style>
</head>
<body>
  <div class="top-bar">
      SOMETHING FIXED HERE
  </div>
        <div class="main-view">
            <span class="special">Lorem</span><span class="special">ipsum</span> dolor sit amet, consectetur adipiscing elit. Pellentesque magna tellus, dictum et luctus ac, laoreet vel justo. Cras at pretium lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Maecenas tincidunt efficitur neque, eu elementum purus tincidunt vel. Nunc id dolor bibendum, pharetra erat in, pretium lorem. Donec vitae nulla et lacus porta scelerisque. Praesent blandit, nibh nec vulputate semper, arcu odio scelerisque velit, at rhoncus lacus dui luctus sapien. Donec venenatis erat libero, vitae lobortis velit finibus ut.
        </div>
        <div class="bottom-bar">
            SOMETHING FIXED HERE
        </div>
    </div>
</body>
</html>

【讨论】：

【解决方案2】：

这是弹性盒的本质。您为容器提供了column 的属性flex-direction。 .special 元素被视为弹性项目并排列在列中。只需将它们全部包装在 div 中，这样您就有一个 flex 项目，因此 inline 显示可以启动

.main-container {
  width: 50%;
  height: 98vh;
  flex-direction: column;
  display: flex;
}

.main-container .main-view {
  width: 100%;
  overflow-y: scroll;
  flex: 1 1 auto;
}

.main-container .top-bar {
  width: 100%;
  flex: 0 0 1em;
  text-align: center;
}

.main-container .bottom-bar {
  width: 100%;
  flex: 0 0 1em;
}

.special {
  display: inline;
}

<div class="main-container">
  <div class="main-container top-bar">
    SOMETHING FIXED HERE
  </div>
  <div class="main-container main-view">
    <div>
      <span class="special">Lorem</span> <span class="special"> ipsum</span> dolor sit amet, consectetur adipiscing elit. Pellentesque magna tellus, dictum et luctus ac, laoreet vel justo. Cras at pretium lectus. Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Suspendisse potenti. Maecenas tincidunt efficitur neque, eu elementum purus tincidunt vel. Nunc id dolor bibendum, pharetra erat in, pretium lorem. Donec vitae nulla et lacus porta scelerisque. Praesent blandit, nibh nec vulputate
      semper, arcu odio scelerisque velit, at rhoncus lacus dui luctus sapien. Donec venenatis erat libero, vitae lobortis velit finibus ut.
    </div>
  </div>
  <div class="main-container bottom-bar" id="bottom-bar">
    SOMETHING FIXED HERE
  </div>
</div>

或者，您可以在您的弹性容器上使用flex-direction: row（在本例中为.main-view），这样您的弹性项目就可以“并排”显示，而不是堆叠在一个列中。请参阅下面的示例：

.main-container {
  width: 50%;
  height: 98vh;
  flex-direction: column;
  display: flex;
}

.main-container .main-view {
  width: 100%;
  overflow-y: scroll;
  flex: 1 1 auto;
  flex-direction: row;
}

.main-container .top-bar {
  width: 100%;
  flex: 0 0 1em;
  text-align: center;
}

.main-container .bottom-bar {
  width: 100%;
  flex: 0 0 1em;
}

.special {
  display: inline;
  margin-right: 10px;
}

<div class="main-container">
  <div class="main-container top-bar">
    SOMETHING FIXED HERE
  </div>
  <div class="main-container main-view">
    <span class="special">Lorem</span><span class="special">ipsum</span>Hello
  </div>
  <div class="main-container bottom-bar" id="bottom-bar">
    SOMETHING FIXED HERE
  </div>
</div>

【讨论】：