我的目标是拥有一个容器,用一些填充填充它的父容器,就像你在blow代码片段中看到的那样。现在,我唯一能想出如何做到这一点的方法就是使用calc()
。从技术上讲,与flex
相比,calc
对浏览器的支持更好,所以我不想这么做。
有没有人能在没有javascript和calc()的情况下找到完成这个任务的方法呢?
假设所有宽度都是百分比。
* { box-sizing: border-box;}
.box {
position:relative;
margin:5px;
}
.halfBox {
padding-bottom:100%;
border:1px solid red;
}
.fullBox {
padding-bottom:50%;
border:1px solid red;
}
.content {
font-size:12px;
background-color:#e3e3e3;
position:absolute;
width:calc(100% - 20px);
height:calc(100% - 20px);
left:10px;
top:10px;
}
<div style="font-size:0">
<div style="width:200px;display:inline-block;">
<div class="halfBox box">
<div class="content">
1
</div>
</div>
</div>
<div style="width:400px;display:inline-block;">
<div class="fullBox box">
<div class="content">
1
</div>
</div>
</div>
</div>
发布于 2019-06-21 03:21:42
只需像您一样使用top
/left
和right
/bottom
* { box-sizing: border-box;}
.box {
position:relative;
margin:5px;
}
.halfBox {
padding-bottom:100%;
border:1px solid red;
}
.fullBox {
padding-bottom:50%;
border:1px solid red;
}
.content {
font-size:12px;
background-color:#e3e3e3;
position:absolute;
right:10px;
bottom:10px;
left:10px;
top:10px;
}
<div style="font-size:0">
<div style="width:200px;display:inline-block;">
<div class="halfBox box">
<div class="content">
1
</div>
</div>
</div>
<div style="width:400px;display:inline-block;">
<div class="fullBox box">
<div class="content">
1
</div>
</div>
</div>
</div>
你也可以考虑保证金:
* { box-sizing: border-box;}
.box {
position:relative;
margin:5px;
}
.halfBox {
padding-bottom:100%;
border:1px solid red;
}
.fullBox {
padding-bottom:50%;
border:1px solid red;
}
.content {
font-size:12px;
background-color:#e3e3e3;
position:absolute;
right:0;
bottom:0;
left:0;
top:0;
margin:10px;
}
<div style="font-size:0">
<div style="width:200px;display:inline-block;">
<div class="halfBox box">
<div class="content">
1
</div>
</div>
</div>
<div style="width:400px;display:inline-block;">
<div class="fullBox box">
<div class="content">
1
</div>
</div>
</div>
</div>
https://stackoverflow.com/questions/56692259
复制相似问题