[英]Absolute positioning inside 100% width relative positioned div
我尝试将一对img
元素绝对定位在一个应该具有position: relative
.branch_item
元素内。
当.branch_item
在px
with
和height
时,一切工作正常,但我需要在%
而不是px
(因为此元素应具有width
100%)。 %
单位仅适用于fixed
位置,但不能处于该位置。
我的代码如下:
<div class="container left">
<div class="twelve columns">
<div class="branch_item">
<div class="csc-row">
<figure class="csc-image csc-image-first csc-image-last">
<img src="uploads/pics/bg_01.png" alt="" />
</figure>
</div>
<div class="csc-row">
<figure class="csc-image csc-image-first csc-image-last">
<img src="uploads/pics/de.act.png" alt="" />
</figure>
</div>
<div class="csc-row">
<figure class="csc-image csc-image-first csc-image-last">
<img src="uploads/pics/lx.act.png" alt="" />
</figure>
</div>
<div class="csc-row csc-row-last">
<figure class="csc-image csc-image-first csc-image-last">
<img src="uploads/pics/pl.act.png" alt="" />
</figure>
</div>
</div>
<div class="twelve columns menu-bar">
</div>
</div>
</div>
这是我的CSS代码:
.branch_item {
background: #ECECED;
position: relative;
top: 50px;
left: 0;
width: 100px;
height: 100px;
}
.branch_item img {
position:absolute;
top:0px;
left:25%;
width:50%;
}
当我以%
单位设置.branch_item
元素的width
和height
,我没有任何内容的空白页。
有人知道如何设置吗?
当您以百分比设置宽度和高度时,它将进行相对于其父级的测量。 您在<div class="twelve columns">
上设置了高度和宽度吗? (不是百分比)如果不是, .branch_item
不能具有百分比高度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.