html - 如何分隔重叠的div块(VueJS)
问题描述
我制作了一个组件,该组件由一个位于页面中心的框组成。但是,我需要 4 个这样的盒子,它们可以全部排列成列或分成 2 列的块。这样,我创建了一个 v-for 来重复该组件 4 次。但是,由于 css,我无法将它们分开。我将其绝对位置定义为能够留在我的背景中(它被定义为默认位置),因为其他形式使框分开但超过了屏幕的总大小。我怎样才能使该组件在我的背景中单独重复?(我不想创建 4 个单独的组件来执行此操作)。
背景 CSS:
<style>
*{
margin: 0;
padding: 0;
}
.background{
height: 100vh;
background-color: #3B3B3B;
}
.title{
border: 1px solid #707070;
border-left: none;
border-right: none;
padding-top: 5em;
}
.title h2{
text-align: left;
color: #B16DFF;
padding-top: 0.8em;
font-size: 2em;
padding-bottom: 0.5em;
margin-left: 1.5em;
font-weight: 600;
}
@media(max-width: 600px){
.title h2{
font-size: 1.17em;
}
}
</style>
组件 CSS:
<style scoped>
*{
margin: 0;
padding: 0;
}
.box{
display: flex;
flex-direction: column;
position: absolute;
z-index: 10;
width: 45em;
height: 30em;
margin-left: 1.5em;
margin-top: 12em;
background-color: #232323;
}
.title{
border-bottom: 1px solid #707070;
}
.title p{
padding: 0.2em 0.8em;
font-size: 1.5em;
font-weight: 600;
color: white;
text-align: left;
}
</style>
Vue.App CSS:
<style>
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}
解决方案
推荐阅读
- sql - 无法增加数据库会话数
- c - sc_memset 中的 volatile 参数
- android - 为什么在颤动的 android 和 ios 上的 BottomAppBar 高度存在差异?
- python - Altair 使用另一个下拉菜单控制一个下拉菜单
- laravel - 外键列的雄辩之和
- c# - 检查当前用户是否在 APS.NET MVC 5 中被阻止的消息处理程序
- python - Python - 与字符串一起获取匹配的字符串百分比
- c# - 我得到一个错误,不能隐式转换 int 类型?诠释。存在显式转换(您是否缺少演员表?)
- sql - SQL Count Case NOT COUNT 多个字符串
- python-2.7 - 通配符更改时具有不同默认文件名的pyface FileDialog