html - 在另一个 div 中居中 div 并防止它出去
问题描述
我开发了一个 div,在那个 div 里面我打算放一个图像,然后是一组两个 div。
有没有办法将下面的两个 div 居中,并在屏幕缩小时防止它们超出主 div?
有人能帮我吗?
代码
<div class="col-md-6 col-sm-12">
<div class="drop">
<div class="abc">
<img src="https://material-components-web.appspot.com/images/photos/2x3/2.jpg">
<div class="boxImage" style="display:flex">
<div class="boxImage1">
</div>
<div>
</div>
</div>
</div>
</div>
</div>
如何使两个 div 居中?
如何防止他们离开主 div?
解决方案
我不是 100% 确定这会回答你的问题,但这是我的看法。我不得不对你的 css 进行一些更改,因为 boxImage 类有点把它扔掉了。我在这些 div 上设置了背景颜色,以便您可以看到它们在屏幕中的位置。
app.component.html
<div class="col-md-6 col-sm-12">
<div class="d-flex justify-content-center p-2"><img src="https://material-components-web.appspot.com/images/photos/2x3/2.jpg"></div>
<div class="d-flex justify-content-center mb-3">
<div class="p-2 boxImage1">Flex item 1</div>
<div class="p-2 boxImage">Flex item 2</div>
</div>
app.component.css
.drop {
height: 670px;
border-radius: 8px;
overflow: hidden;
text-align: center;
background: #eff0f2;
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin-left: 8px;
margin-right: 8px;
}
.abc {
height: 100%;
background-image: ('https://material-components-web.appspot.com/images/photos/2x3/2.jpg');
}
.abc .boxImage {
position: absolute;
right: 27px;
bottom: 40px;
}
.abc .boxImage1 {
position: absolute;
right: 373px;
bottom: 0px;
}
.boxImage {
background-color: red;
background-repeat: no-repeat;
height: 50px;
width: 60%;
border-radius: 8px;
opacity: 1;
font-size: 18px;
}
.boxImage1 {
background-color: yellow;
background-repeat: no-repeat;
height: 50px;
border-radius: 8px;
opacity: 1;
font-size: 18px;
z-index: 1001;
}
推荐阅读
- slack-api - 如何让 slack api block kit 占据整个 slack 窗口的宽度?
- c# - 如何获取客户端远程IP地址
- javascript - 如何将数据传递给组件模板
- postgresql - LEFT JOIN 不能很好地与 Postgres 中的分区表配合使用?
- python - 为什么熊猫在写入 csv 时会删除前导零?
- python - 如何解决:for 循环方程的结果数组出现问题
- java - 有效搜索 Comparable 对象的 Java 集合
- javascript - 在 getDerivedStateFromProps 内部调用 API 后返回状态
- c# - DataGridViewComboBoxCell 不更新列表项
- python - 在Python中获取下一个字符代码加1