所以我是新來的反應，對于我的生活，我無法弄清楚如何制作這樣的東西： 井字游戲網格
我在制作一個行組件時遇到問題，該組件呈現一個具有三個不同方形組件的 div，水平分布在 div 中。當我編譯我的代碼時，一行中的所有方塊都固定在同一個位置。請問我該如何解決這個問題？
我當前的代碼：
應用程式.css
.Row {
text-align: center;
position: absolute;
left: 35%;
right: 50%;
top: 25%;
width: 25%;
height: 25%;
display: flex;
}
.Square {
position: absolute;
width: 70px;
height: 70px;
border-color: #99ccff;
text-align: center;
font-size: xx-large;
font-family: 'Courier New', Courier, monospace;
}
/* .Row {
} */
Square.js
import React from 'react';
import ReactDOM from 'react-dom';
export function Square(props){
// Square is rendered by App
return(
<div >
<button className='Square'> X </button>
</div>
);
}
應用程式.js
import logo from './logo.svg';
import './App.css';
import { Row } from './components/Row';
function App() {
// App renders Row
return (
<Row />
);
}
export default App;
行.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Square } from './Square';
export function Row() {
return(
<div className='Row'>
<Square />
<Square />
<Square />
</div>
)
}
uj5u.com熱心網友回復：
您可以嘗試position: absolute在Square課堂上洗掉：
.Square {
width: 70px;
height: 70px;
border-color: #99ccff;
text-align: center;
font-size: xx-large;
font-family: 'Courier New', Courier, monospace;
}
uj5u.com熱心網友回復：
import "./styles.css";
export default function App() {
return (
<div className={"row"}>
<Square />
<Square />
<Square />
</div>
);
}
export function Square(props) {
// Square is rendered by App
return (
<div className={"column"}>
<button className="Square"> X </button>
<button className="Square"> X </button>
<button className="Square"> X </button>
</div>
);
}
樣式.css 檔案
.App {
font-family: sans-serif;
text-align: center;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
閱讀這篇文章以進一步了解 flex：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/438230.html
標籤：javascript html css 反应