調整螢屏大小時，標題不會停留在絕對位置-有解無憂

我正在嘗試為 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>
  )
}

任何幫助將不勝感激 - 整天都在敲我的頭，試圖讓它正確格式化。

uj5u.com熱心網友回復：

問題的根源在于margin您設定的動態.name。您可以洗掉它，也可以洗掉它并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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/451921.html

標籤：html css 反应弹性盒

上一篇：將滑鼠懸停在按鈕上時文本的顏色不會改變

下一篇：在CSS中單擊時隱藏下拉選單