通过使用按钮右侧的网格位置。谁能指出我正确的方向?
.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的末尾?
答案 0 :(得分:2)
问题是..您已将网格宽度设置为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
答案 1 :(得分:1)
使用justify-content: end;
和grid-template-columns: 100px 100px;
.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;
}
<div class="container">
<div class="grid">
<button>test 1</button>
<button>test 2</button>
</div>
</div>
答案 2 :(得分:1)
希望这对您有帮助!
.container {
width: 500px;
border: 1px solid red;
}
.grid {
display: grid;
grid-gap: 5px;
grid-auto-flow: column;
width: 100px;
margin: 0 0 0 auto; //added
}
<div class="container">
<div class="grid">
<button>test 1</button>
<button>test 2</button>
</div>
</div>