英文:
How to align my Image and Text in flex using React
问题
这是我的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
似乎您正在尝试创建一个弹性盒子布局，将图像水平放置，并在每个图像下面显示文本。然而，您的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;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论