Question

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

在App本身中，我会像这样渲染这些组件：

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";
}

使用css为反应应用

1 个答案: