"在 React 中將文本放在 div 的底部"

Question

如何在普通的舊 React（不是 React Native）中將文本放在 div 的底部？

在 html 中，您可以通過使用將文本放在 div 的底部

vertical-align: text-bottom;

在 React Native 中，看起來你通過使用將文本放置在 div 的底部

textAlignVertical: "bottom",

有沒有一種簡單的方法可以在普通的舊 React 中將文本放在 div 的底部？ 到目前為止，我工作的唯一方法是使用 Flexbox。

import React from "react";
import "./styles.css";

export default function App() {  
  const style3 = {
    height: "75px",
    display: "flex",
    justifyContent: "flex-end",
    alignItems: "flex-end",
  };
  return (
    <div className="App">
      <div style={style3}>CSS Flexbox</div>
    </div>
  );
}

代碼沙盒

---

編輯：這是一個簡化的例子。 我真正需要的是一個 div，其中包含多個不同位置的項目，以及底部的文本。

---

編輯：在 HTML 和 React 中， vertical-align: text-bottom; 不會將文本移動到 div 的底部。 它只會將文本向下移動一點到文本通常所在的底部。 所以在 HTML 和 React 中，它都可以用來將文本向下移動一點作為下標。 但在 HTML 和 React 中，它不能用於將文本向下移動到 div 的底部。

Answer 1

您可以使用margin ：

import React from "react";
import "./styles.css";

export default function App() {  
  const style3 = {
    height: "75px",
    marginTop: 'auto'
  };
  return (
    <div className="App">
      <div style={style3}>CSS Flexbox</div>
    </div>
  );
}

或align-self ：

import React from "react";
import "./styles.css";

export default function App() {  
  const style3 = {
    height: "75px",
    alignSelf: 'flex-end'
  };
  return (
    <div className="App">
      <div style={style3}>CSS Flexbox</div>
    </div>
  );
}

Answer 2

我注意到你在一個更復雜的例子中提到了 div 有很多其他信息。 如果您還沒有，我強烈建議您嘗試使用 css grid。 它使您可以非常輕松地構建屏幕上的項目。

這是一個使用網格創建“聖杯布局”的示例，這絕不是最好的示例，但它顯示了在屏幕的不同區域構建 div 是多么容易。

https://codepen.io/frazermg/pen/bXbXOR?editors=1100

 .container { display: grid; grid-template-areas: 'header header header header' 'left content content right' 'left content content right' 'footer footer footer footer'; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(30vh, auto); } .header { background-color: blue; grid-area: header; } .left { background-color: green; grid-area: left; } .content { background-color: #eee; grid-area: content; } .right { background-color: pink; grid-area: right; } .footer { background-color: orange; grid-area: footer; }

 <div class="container"> <div class="header"></div> <div class="left"></div> <div class="content"></div> <div class="right"></div> <div class="footer"></div> </div>

這是嵌套網格的示例：

https://codepen.io/frazermg/pen/ZgEwVd

這個網站對 css 的所有東西都非常有用，尤其是 flexbox 和 grid。 https://css-tricks.com/snippets/css/complete-guide-grid/

我希望這可以幫助你！

Answer 3

像這樣在 div 中使用文本簡單地設置任何跨度或組件的樣式怎么樣：

... style={{position:"absolute",bottom:"0px"}} ...