Question

我创建了一个包含三个部分的网页。每个部分用背景图像表示，占用100vh，以便始终适合屏幕的整个尺寸。您可以通过滚动或使用导航栏在这些窗格之间导航。

我无法弄清楚如何在这些部分中定位超过30个字符的内容。它要么“跳下来”又要“jump？进入下一部分或跨页面运行而不考虑宽度设置。

简而言之，我尝试创建一个div，我可以在其中放置不同类型的内容（文本块，嵌入的视频/图像，始终在其父标记中居中。

我认为问题是通过我定义我的部分的方式创建的。

SELECT e.vorname, e.emp_nr, SUM(a.az) AS Total
FROM employee e
INNER JOIN az_konto a ON a.emp_nr = e.emp_nr
WHERE a.datum BETWEEN '2018-02-01' AND '2018-02-01' + INTERVAL 1 MONTH - INTERVAL 1 DAY
GROUP BY e.vorname, e.emp_nr

我已经包含了一支笔，因此您可以完整地查看我的代码。感谢您的反馈。

https://codepen.io/EnzoCodes/pen/GQvWrv

Answer 1

你的初始代码有点凌乱无法真正告诉你的目的。为了将你的约盒子放在第一部分内的新位置，我将该部分设为一个弹性盒。这是我添加的CSS：

  section:nth-child(1) {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .aboutBox {
    position: relative;
    padding: 5px;
  }

关于盒子代码只是为了清理它，但是flexbox允许你对齐部分内的项目。我将盒子完美地放在了部分内部。这是一个更新的代码集： https://codepen.io/anon/pen/mXMBxa

你并不仅限于这种定位。这是一个方便的flexbox指南，解释了它的工作原理以及你可以用它做什么：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

定位内容的另一种方法是在部分内容上使用绝对位置。然后，您可以使用顶部，左侧，右侧和底部CSS规则对齐项目。这是一个codepen，将您的aboutbox显示为Flexbox中绝对定位的项目： https://codepen.io/anon/pen/xYLXQY

当背景设置为100vh时如何定位内容

1 个答案: