html - 将 div 定位到容器的底部
问题描述
我有以下 HTML 页面:https ://jsfiddle.net/fk42dw85/
我想将橙色块放置在 div 容器的底部而不是顶部。我如何实现这一目标?
.container {
margin-top: 20px;
margin-bottom: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<div style="background:url('https://dynaimage.cdn.cnn.com/cnn/q_auto,w_826,c_fill/http%3A%2F%2Fcdn.cnn.com%2Fcnnnext%2Fdam%2Fassets%2F131126191411-strahov-abbey-library.jpg');height:200px;">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-6" style="background:orange">
test
</div>
</div>
</div>
</div>
</div>
</div>
解决方案
.container {
margin-top: 20px;
margin-bottom: 20px;
position: absolute;
bottom: 0;
left: calc(50% - 270px);
}
.parentContainer {
position: relative;
}
推荐阅读
- plot - 乳胶中的二维绘图
- c - C逗号在scanf中打破整数
- javascript - 是否可以通过 Ajax 将内容更新给最终用户,而不会因更新/刷新而丢失滚动位置?
- python - 在 backtrader 上运行回测,我收到了许多订单取消/保证金/拒绝,而他们不应该这样做
- javascript - 如何检查一个 fabricjs 对象是否与另一个对象发生冲突?
- angular - 在浏览器中单击后退/前进时保持 Angular 子组件中的绑定
- ios - UITableView 拖放与滑动删除
- ios - xCode 错误导致应用程序在启动后立即崩溃
- ubuntu - 将 jupyterlab 作为 ubuntu 20.04 服务权限问题运行
- database - 将 Postgresql 数据库连接到 Powerbi