這是我的簡單網格：
display: grid;
grid-template-columns: 70% 30%;
grid-gap: 2px;
所以在第一列我想左對齊內容，在第二列我想右對齊內容：
|Column1 | Cloumn2|
|content | content|
uj5u.com熱心網友回復：
您可以選擇網格中的專案并使它們分別顯示：根據需要向左或向右彎曲和對齊它們的內容。
這是一個兩列網格的簡單片段。它只為演示提供顏色，因此您可以看到對齊是正確的。
.grid {
display: grid;
grid-template-columns: 70% 30%;
grid-gap: 2px;
width: 90vw;
background: black;
}
.grid>* {
display: flex;
background: cyan;
}
.grid>*:nth-child(1) {
justify-content: left;
background: yellow;
}
.grid>*:nth-child(2) {
justify-content: right;
}<div class="grid">
<div>Column1<br>content</div>
<div>Column2<br>content</div>
</div>uj5u.com熱心網友回復：
好的..對于我剛剛設定的第二列 DIV：
<div style={{justifySelf: 'end'}}>
uj5u.com熱心網友回復：
- 將網格創建為容器
- 然后創建兩個不同的div，一個用于左側，一個用于右側
- 然后對齊內容
所以它看起來像
<div className="container">
<div className="left"></div>
<div className="right"></div>
</div>
然后將文本在左側 div 上對齊到左側，在右側 div 上對齊。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/437821.html
上一篇：CSS專案符號對齊但現在浮動