"在 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"}} ...