如何实现底部对齐,目前CSS代码父类:/设置容器位置,margin上右下左/ #container{ width:500px; background-color: #fff; height:550px; border-radius: 10px; box-shadow: 0 0 0 5px deepskyblue,0 0 0 10px orangered,0 0 0 15px deepskyblue; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); },子类:/设置div中的文字样式/ .last{ text-align: center; font-size:15px; margin-top:18%; position:absolute; left:28%; },不能修改父类因为有其他子类应用
时间: 2024-03-08 16:44:55 浏览: 94
如果不能修改父类,可以将子类的position属性改为fixed,并将bottom属性设置为0。修改后的代码如下:
.last{
text-align: center;
font-size:15px;
margin-top:18%;
position: fixed;
left:28%;
bottom: 0;
}
这样就可以实现底部对齐了。请注意,如果父类的高度不足以容纳所有子类,可能会出现遮挡的情况。如果出现这种情况,可以考虑调整父类的高度或将子类分组放置。
相关问题
如何实现底部对齐,目前CSS代码父类:/*设置容器位置,margin上右下左*/ #container{ width:500px; background-color: #fff; height:550px; border-radius: 10px; box-shadow: 0 0 0 5px deepskyblue,0 0 0 10px orangered,0 0 0 15px deepskyblue; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); },子类:/*设置div中的文字样式*/ .last{ text-align: center; font-size:15px; margin-top:18%; position:absolute; left:28%; }
要实现底部对齐,可以将父类的position属性改为fixed,并将bottom属性设置为0。修改后的代码如下:
#container{
width:500px;
background-color: #fff;
height:550px;
border-radius: 10px;
box-shadow: 0 0 0 5px deepskyblue,0 0 0 10px orangered,0 0 0 15px deepskyblue;
position: fixed;
left: 50%;
bottom: 0;
transform: translate(-50%, 0);
}
子类的样式可以不变。这样就可以实现底部对齐了。
阅读全文