如何在使用React时使用flex来对齐我的图片和文本

huangapple
go评论122阅读模式
英文:

How to align my Image and Text in flex using React

问题

这是我的CSS：

  1. .row::after{
  2.     display: flex;
  3.     position: relative;
  4.     flex: 1;
  5.     flex-direction: row;
  6.     padding: 20px;
  7.     /* content: "";
  8.     clear: both;
  9.     display: table; */
  10. }
  12. .Image-container2{
  13.     width: 25%;
  14. }
  16. .column img{
  17.     float: left;
  18.     width: 20%;
  19.     padding: 5px;     
  20. }
  22. .Text2{
  23.     color: red;
  24.     font-size: smaller;
  25.     width: 100;
  26. }

这是我的React代码：

  1. import React from 'react';
  2. import "./Section2.css"
  4. function Section2(props) {
  5.     return (
  6.         <div className='row'>
  7.             <div className='column'>
  8.                 <img src={props.image} alt=''/>
  9.                 <div className='Text2'>
  10.                     <p>{props.theme}</p>
  11.                     <h2>{props.Title}</h2>
  12.                     <p>{props.By}</p>
  13.                     <p>{props.length}</p>
  14.                 </div> 
  15.             </div>
  16.         </div>
  17.     );
  18. }
  20. export default Section2;
英文:

I am trying to use Flex to position my images horizontally, with the text appearing beneath each image. The image is aligned horizontally only when I comment out the texts. But with the texts uncommented, it disrupts the structure.

This is my CSS

  1. .row::after{
  2.     display: flex;
  3.     position: relative;
  4.     flex: 1;
  5.     flex-direction: row;
  6.     padding: 20px;
  7.     /* content: &quot;&quot;;
  8.     clear: both;
  9.     display: table; */
  10. }
  13. .Image-container2{
  14.     width: 25%;
  15.     
  16. }
  18. .column img{
  19.     float: left;
  20.     width: 20%;
  21.     padding: 5px;     
  22. }
  24. .Text2{
  25.     color: red;
  26.     font-size: smaller;
  27.     width: 100;`

This is my React code:

  1. typeimport React from &#39;react&#39;;
  2. import &quot;./Section2.css&quot;
  4. function Section2(props) {
  5.     return (
  6.         &lt;div className=&#39;row&#39;&gt;
  7.             &lt;div className=&#39;column&#39;&gt;
  8.                 &lt;img src={props.image} alt=&#39;&#39;/&gt;
  9.              &lt;div className=&#39;Text2&#39;&gt;
  10.                 &lt;p&gt;{props.theme}&lt;/p&gt;
  11.                 &lt;h2&gt;{props.Title}&lt;/h2&gt;
  12.                 &lt;p&gt;{props.By}&lt;/p&gt;
  13.                 &lt;p&gt;{props.length}&lt;/p&gt;
  15.             &lt;/div&gt; 
  16.             &lt;/div&gt;
  17.         &lt;/div&gt;
  20.     );
  21.     
  22. }
  24. export default Section2 here

答案1

得分: 1

似乎您正在尝试创建一个弹性盒子布局，将图像水平放置，并在每个图像下面显示文本。然而，您的CSS和React代码存在一些问题，可能会导致布局中的干扰。我将为您提供已更正的代码并解释所做的更改。

CSS 代码：

  1. .row {
  2.     display: flex;
  3.     flex-wrap: wrap;
  4.     justify-content: space-between;
  5.     padding: 20px;
  6. }
  8. .column {
  9.     flex: 0 0 25%;
  10.     display: flex;
  11.     flex-direction: column;
  12.     align-items: center;
  13.     padding: 5px;
  14. }
  16. .column img {
  17.     max-width: 100%;
  18. }
  20. .Text2 {
  21.     color: red;
  22.     font-size: smaller;
  23.     text-align: center;
  24.     margin-top: 10px;
  25. }

React 代码：

  1. import React from 'react';
  2. import './Section2.css';
  4. function Section2(props) {
  5.     return (
  6.         <div className='row'>
  7.             <div className='column'>
  8.                 <img src={props.image} alt='' />
  9.                 <div className='Text2'>
  10.                     <p>{props.theme}</p>
  11.                     <h2>{props.Title}</h2>
  12.                     <p>{props.By}</p>
  13.                     <p>{props.length}</p>
  14.                 </div>
  15.             </div>
  16.         </div>
  17.     );
  18. }
  20. export default Section2;

请使用上述已更正的代码以解决您的布局问题。

英文:

It seems like you're trying to create a flexbox layout to position images horizontally with text underneath each image. However, your CSS and React code have a few issues that might be causing disruption in the layout. I'll provide you with the corrected code and explain the changes.

css code:

  1. .row {
  2.     display: flex;
  3.     flex-wrap: wrap;
  4.     justify-content: space-between;
  5.     padding: 20px;
  6. }
  8. .column {
  9.     flex: 0 0 25%;
  10.     display: flex;
  11.     flex-direction: column;
  12.     align-items: center;
  13.     padding: 5px;
  14. }
  16. .column img {
  17.     max-width: 100%;
  18. }
  20. .Text2 {
  21.     color: red;
  22.     font-size: smaller;
  23.     text-align: center;
  24.     margin-top: 10px;
  25. }

react code:

  1. import React from &#39;react&#39;;
  2. import &#39;./Section2.css&#39;;
  4. function Section2(props) {
  5.     return (
  6.         &lt;div className=&#39;row&#39;&gt;
  7.             &lt;div className=&#39;column&#39;&gt;
  8.                 &lt;img src={props.image} alt=&#39;&#39;/&gt;
  9.                 &lt;div className=&#39;Text2&#39;&gt;
  10.                     &lt;p&gt;{props.theme}&lt;/p&gt;
  11.                     &lt;h2&gt;{props.Title}&lt;/h2&gt;
  12.                     &lt;p&gt;{props.By}&lt;/p&gt;
  13.                     &lt;p&gt;{props.length}&lt;/p&gt;
  14.                 &lt;/div&gt;
  15.             &lt;/div&gt;
  16.         &lt;/div&gt;
  17.     );
  18. }
  20. export default Section2;

huangapple
  • 本文由 发表于 2023年8月10日 18:48:05
  • 转载请务必保留本文链接：https://go.coder-hub.com/76875009.html
  • css
  • flexbox
  • frontend
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定