通过使用右侧按钮的网格定位。有人能指出我正确的方向吗？
.container {
width: 500px;
border: 1px solid red;
}
.grid {
display: grid;
grid-gap: 5px;
grid-auto-flow: column;
width: 100px;
}
<div class="container">
<div class="grid">
<button>test 1</button>
<button>test 2</button>
</div>
</div>
在上面的场景中，如何将两个按钮移动到父div的末尾？
问题是..您已将网格宽度设置为 100px
而是设置列width:100px在网格内部，因为网格是容器也使用justify-content:end;将内容与右侧对齐。
.container {
width: 500px;
border: 1px solid red;
}
.grid {
display: grid;
grid-gap: 5px;
grid-auto-flow: column;
width: 100%;
grid-template-columns: 100px 100px;
justify-content: end;
}
button{display:inline-block;}
<div class="container">
<div class="grid">
<button>test 1</button>
<button>test 2</button>
</div>
</div>
参考：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
