英文:

How to align my Image and Text in flex using React

问题 {#heading}

这是我的CSS：

.row::after{
    display: flex;
    position: relative;
    flex: 1;
    flex-direction: row;
    padding: 20px;
    /* content: "";
    clear: both;
    display: table; */
}

.Image-container2{
    width: 25%;
}

.column img{
    float: left;
    width: 20%;
    padding: 5px;     
}

.Text2{
    color: red;
    font-size: smaller;
    width: 100;
}

这是我的React代码：

import React from 'react';
import "./Section2.css"

function Section2(props) {
    return (
        <div className='row'>
            <div className='column'>
                <img src={props.image} alt=''/>
                <div className='Text2'>
                    <p>{props.theme}</p>
                    <h2>{props.Title}</h2>
                    <p>{props.By}</p>
                    <p>{props.length}</p>
                </div> 
            </div>
        </div>
    );
}

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

.row::after{
    display: flex;
    position: relative;
    flex: 1;
    flex-direction: row;
    padding: 20px;
    /* content: "";
    clear: both;
    display: table; */
}

.Image-container2{
width: 25%;


}


.column img{
float: left;
width: 20%;
padding: 5px;

}


.Text2{
color: red;
font-size: smaller;
width: 100;\`

This is my React code:

typeimport React from 'react';
import "./Section2.css"

function Section2(props) {
return (
\<div className=\'row\'\>
\<div className=\'column\'\>
\<img src={props.image} alt=\'\'/\>
\<div className=\'Text2\'\>
\<p\>{props.theme}\</p\>
\<h2\>{props.Title}\</h2\>
\<p\>{props.By}\</p\>
\<p\>{props.length}\</p\>


            </div> 
            </div>
        </div>


    );




}

`export default Section2 here
`

答案1 {#1}

得分: 1

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

CSS 代码：

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
}

.column {
    flex: 0 0 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
}

.column img {
    max-width: 100%;
}

.Text2 {
    color: red;
    font-size: smaller;
    text-align: center;
    margin-top: 10px;
}

React 代码：

import React from 'react';
import './Section2.css';

function Section2(props) {
    return (
        <div className='row'>
            <div className='column'>
                <img src={props.image} alt='' />
                <div className='Text2'>
                    <p>{props.theme}</p>
                    <h2>{props.Title}</h2>
                    <p>{props.By}</p>
                    <p>{props.length}</p>
                </div>
            </div>
        </div>
    );
}

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:

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
}

.column {
flex: 0 0 25%;
display: flex;
flex-direction: column;
align-items: center;
padding: 5px;
}


.column img {
max-width: 100%;
}

`.Text2 {
color: red;
font-size: smaller;
text-align: center;
margin-top: 10px;
}
`

react code:

import React from 'react';
import './Section2.css';

function Section2(props) {
return (
\<div className=\'row\'\>
\<div className=\'column\'\>
\<img src={props.image} alt=\'\'/\>
\<div className=\'Text2\'\>
\<p\>{props.theme}\</p\>
\<h2\>{props.Title}\</h2\>
\<p\>{props.By}\</p\>
\<p\>{props.length}\</p\>
\</div\>
\</div\>
\</div\>
);
}

`export default Section2;
`