html - 使用 css 将标题标题对齐到正文组件上方以进行 react 应用程序

Question

在这里我们可以看到我的应用程序的可怕呈现:

在应用程序本身中，我会像这样渲染这些组件:

render() {
  return (
    <div className="App">

    <div className="title_component">
      <header className="App-header">
        <h1 className="App-title">Welcome to React</h1>
      </header>
      <p className="App-intro">
        To get started, edit <code>src/App.js</code> and save to reload.
      </p>
    </div>



      <Result text={this.state.equation}/>
      <ButtonNumberContainer addLogicToEquation={this.addLogicToEquation}/>
      <ButtonEquationContainer addLogicToEquation={this.addLogicToEquation}
                               evalEquation={this.evalEquation}/>
    </div>
  );
}

但是，我想更重要的是 css，我真的不是这方面的专家……这就是我现在所处的位置:

.title_component{
    top: 0
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  position: relative;

  top: 0;
  left: 0;

  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100vh;
  background-image: linear-gradient(to bottom right, #5cefff 0%, #a25129 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#root {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #d55b5b;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #999;
}

.btn:hover {background-color: #bd5151}

.btn:active {
  background-color: #bd5151;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.App {
  margin-top: 10vh;
  display: grid;
  grid-template-columns: 80px 80px 80px 80px;
  grid-column-gap: 5px;
  grid-template-rows: 60px;
  grid-template-areas:
    "result  result  result  result"
    "numbers numbers numbers equations"
    "numbers numbers numbers equations"
    "numbers numbers numbers equations"
    "numbers numbers numbers equations"
    ".       .       .       equations";
}

.result {
  background-color: white;
  text-align: right;
  grid-area: result;
}

.numbers {
  grid-area: numbers;
}

.equations {
  grid-area: equations;
}

/* equations */

.btn-equation-+ {
  grid-area: plus
}
.btn-equation-- {
  grid-area: minus
}
.btn-equation-* {
  grid-area: multiply
}
.btn-equation-/ {
  grid-area: divide
}

.btn-equation-= {
  grid-area: equal
}
.btn-equation-container {
  display: grid;
  grid-template-columns: 80px;
  grid-column-gap: 5px;
  grid-row-gap: 15px;
  grid-template-rows: auto;
  grid-template-areas:
    "plus"
    "minus"
    "multiply"
    "divide"
    "equal";
}

/* Numbers */

.btn-number-D {
  grid-area: btn-number-D;
}

.btn-number-0 {
  grid-area: btn-number-0;
}

.btn-number-1 {
  grid-area: btn-number-1;
}

.btn-number-2 {
  grid-area: btn-number-2;
}

.btn-number-3 {
  grid-area: btn-number-3;
}

.btn-number-4 {
  grid-area: btn-number-4;
}

.btn-number-5 {
  grid-area: btn-number-5;
}

.btn-number-6 {
  grid-area: btn-number-6;
}

.btn-number-7 {
  grid-area: btn-number-7;
}

.btn-number-8 {
  grid-area: btn-number-8;
}

.btn-number-9 {
  grid-area: btn-number-9;
}
.btn-number-R {
  grid-area: btn-number-R;
}

.btn-number-container {
  display: grid;
  grid-template-columns: 80px 80px 80px;
  grid-template-rows: auto;
  grid-column-gap: 5px;
  grid-row-gap: 15px;
  grid-template-areas:
    "btn-number-1 btn-number-2 btn-number-3"
    "btn-number-4 btn-number-5 btn-number-6"
    "btn-number-7 btn-number-8 btn-number-9"
    "btn-number-D btn-number-0 btn-number-R";
}

我需要对 css 做些什么才能使标题显示在计算器的顶部？

我的想法是什么，也许我可以让标题的底部 absolute 始终位于计算器的顶部 - 但我在 css 方面不够熟练，实际上做到这一点——这样的程序涉及什么？

更新

现在它呈现如下:

使用以下 css:

.title_component{
  grid-area: title_component;
}
.App {
  margin-top: 10vh;
  display: grid;
  grid-template-columns: 80px 80px 80px 80px;
  grid-column-gap: 5px;
  grid-template-rows: 60px;
  grid-template-areas:
    "result  result  result  result"
    "numbers numbers numbers equations"
    "numbers numbers numbers equations"
    "numbers numbers numbers equations"
    "numbers numbers numbers equations"
    ".       .       .       equations";
}



.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  position: relative;

  top: 0;
  left: 0;

  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100vh;
  background-image: linear-gradient(to bottom right, #5cefff 0%, #a25129 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#root {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #d55b5b;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #999;
}

.btn:hover {background-color: #bd5151}

.btn:active {
  background-color: #bd5151;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}





.result {
  background-color: white;
  text-align: right;
  grid-area: result;
}

.numbers {
  grid-area: numbers;
}

.equations {
  grid-area: equations;
}

/* equations */

.btn-equation-+ {
  grid-area: plus
}
.btn-equation-- {
  grid-area: minus
}
.btn-equation-* {
  grid-area: multiply
}
.btn-equation-/ {
  grid-area: divide
}

.btn-equation-= {
  grid-area: equal
}
.btn-equation-container {
  display: grid;
  grid-template-columns: 80px;
  grid-column-gap: 5px;
  grid-row-gap: 15px;
  grid-template-rows: auto;
  grid-template-areas:
    "plus"
    "minus"
    "multiply"
    "divide"
    "equal";
}

/* Numbers */

.btn-number-D {
  grid-area: btn-number-D;
}

.btn-number-0 {
  grid-area: btn-number-0;
}

.btn-number-1 {
  grid-area: btn-number-1;
}

.btn-number-2 {
  grid-area: btn-number-2;
}

.btn-number-3 {
  grid-area: btn-number-3;
}

.btn-number-4 {
  grid-area: btn-number-4;
}

.btn-number-5 {
  grid-area: btn-number-5;
}

.btn-number-6 {
  grid-area: btn-number-6;
}

.btn-number-7 {
  grid-area: btn-number-7;
}

.btn-number-8 {
  grid-area: btn-number-8;
}

.btn-number-9 {
  grid-area: btn-number-9;
}
.btn-number-R {
  grid-area: btn-number-R;
}

.btn-number-container {
  display: grid;
  grid-template-columns: 80px 80px 80px;
  grid-template-rows: auto;
  grid-column-gap: 5px;
  grid-row-gap: 15px;
  grid-template-areas:
    "btn-number-1 btn-number-2 btn-number-3"
    "btn-number-4 btn-number-5 btn-number-6"
    "btn-number-7 btn-number-8 btn-number-9"
    "btn-number-D btn-number-0 btn-number-R";
}

Answer 1

我认为这就是您想要的输出:

以下是 css 的变化:

.title_component{
  grid-area: title_component;
}

.App {
  margin-top: 10vh;
  display: grid;
  grid-template-columns: 80px 80px 80px 80px;
  grid-column-gap: 5px;
  grid-template-areas:
    "title_component title_component title_component title_component"
    "result  result  result  result"
    "numbers numbers numbers equations"
    "numbers numbers numbers equations"
    "numbers numbers numbers equations"
    "numbers numbers numbers equations"
    ".       .       .       equations";
}