在div的底部使用CSSalignmentbutton

我想alignment我的div右下angular的button。 我怎样才能做到这一点？

div的当前CSS：

float: right; width: 83%; margin-right: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; height:625px; overflow:auto; 

Answer 1

你可以使用position:absolute; 在父div中绝对定位一个元素。 当使用position:absolute; 元素将被定位绝对从第一个定位的父div，如果它不能find一个它将绝对从窗口定位，所以你将需要确保内容div位置。

为了使内容分区定位，所有不是静态的position值将起作用，但relative是最简单的，因为它不会自己改变分区定位。

所以添加position:relative; 到内容div，从button中删除浮动，并添加下面的CSS到button：

 position: absolute; right: 0; bottom: 0; 

Answer 2

CSS3 flexbox也可以用来alignment父元素底部的button。

必需的HTML：

 <div class="container"> <div class="btn-holder"> <button type="button">Click</button> </div> </div> 

必要的CSS：

 .container { justify-content: space-between; flex-direction: column; height: 100vh; display: flex; } .container .btn-holder { justify-content: flex-end; display: flex; } 

截图：

有用的资源：

• 眼镜
• MDN
• CSS技巧

 * {box-sizing: border-box;} body { background: linear-gradient(orange, yellow); font: 14px/18px Arial, sans-serif; margin: 0; } .container { justify-content: space-between; flex-direction: column; height: 100vh; display: flex; padding: 10px; } .container .btn-holder { justify-content: flex-end; display: flex; } .container .btn-holder button { padding: 10px 25px; background: blue; font-size: 16px; border: none; color: #fff; } 

 <div class="container"> <p>Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... </p> <div class="btn-holder"> <button type="button">Click</button> </div> </div> 

Answer 3

父容器必须有这样的：

 position: relative; 

button本身必须有这样的：

 position: relative; bottom: 20px; right: 20px; 

或任何你喜欢的

Answer 4

走向右边，可以用同样的方式左边

 .yourComponent { float: right; bottom: 0; }