调整屏幕大小时标题不在绝对位置

Question

我正在尝试在 React 中为网站创建描述框。下图是您想要的外观：

但是当我调整屏幕大小时，h1 标签似乎不再保持其绝对位置。我希望方框可以像在屏幕上一样调整大小，但“项目 1”标题应保留在同一位置。

生成图像的 CSS 代码是：

body {
  font-family: sans-serif;
  margin: 0 auto;
  padding: 25px;
  max-width: 800px;
  min-width: 400px;
  background-color: #e0e0e0;
  text-align: center;
}

.card {
  position: relative;
  padding: 25px 0px;
  background-color: #ffffff;
  margin: 50px 0;
  text-align: left;
}

.top {
  height: 100px;
  width: 100%;
  background-color: #69143a;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
}

h1 {
  position: relative;
  display: flex;
}

.name {
  font-size: 2em;
  color: #ffffff;
  display: flex;
  flex: 1;
  margin: 10% 25px 0;
}

.supervisor {
  font-size: 1em;
  margin: 20px 20px;
  color: #353535;
}

.bottom {
  margin-top: 100px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 10px;
  color: #353535;
}

.info {
  margin: 20px 20px;
}

.subjects {
  margin: 20px 20px;
  font-style: italic;
}

React 组件是：

function Project(props) {
  return (
    <div className="card">
      <div className="top">
        <h2 className="name">{props.title}</h2>
      </div>
      <div className="bottom">
        <h4 className="supervisor">Supervisor: {props.supervisor}</h4>
        <p className="info">{props.description}</p>
        <p className="subjects">Prerequisites: {props.subjects}</p>
      </div>
    </div>
  )
}

任何帮助将不胜感激 - 我一整天都在用头撞墙试图让它正确格式化。

Answer 1

问题的根源在于您在 .name 上设置的动态 margin。您可以删除它并删除 position: absolute; 并将其与 relative 交换。然后移除 .card 上的顶部填充，你就可以开始了。

body {
  font-family: sans-serif;
  margin: 0 auto;
  padding: 25px;
  max-width: 800px;
  min-width: 400px;
  background-color: #e0e0e0;
  text-align: center;
}

.card {
  position: relative;
  padding: 0px 0px 25px 0px;
  background-color: #ffffff;
  margin: 50px 0;
  text-align: left;
}

.top {
  width: 100%;
  background-color: #69143a;
  position: relative;
  top: 0;
  left: 0;
  text-align: center;
}

h1 {
  position: relative;
  display: flex;
}

.name {
  font-size: 2em;
  color: #ffffff;
  padding: 30px;
}

.supervisor {
  font-size: 1em;
  margin: 20px 20px;
  color: #353535;
}

.bottom {
  margin-top: 100px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 10px;
  color: #353535;
}

.info {
  margin: 20px 20px;
}

.subjects {
  margin: 20px 20px;
  font-style: italic;
}

<div class="card">
  <div class="top">
    <h2 class="name">{props.title}</h2>
  </div>
  <div class="bottom">
    <h4 class="supervisor">Supervisor: {props.supervisor}</h4>
    <p class="info">{props.description}</p>
    <p class="subjects">Prerequisites: {props.subjects}</p>
  </div>
</div>

调整屏幕大小时标题不在绝对位置

Heading not staying in the absolute position when screen is resized

html

css

flexbox

reactjs