我正在使用css伪元素:before和:after对网站上的一些图像给出缩进效果。但是,如果不指定宽度和高度,则不会显示这些内容。这会让我为每个图像指定一个固定的宽度和高度,我想这对静态网页是有用的。
然而,因为这些图像是使用jQuery动态生成的并且是用户提交的,所以每次图像的宽度和高度都不同。现在我可以通过从图像获取宽度并将其传递给:之前的Javascript来解决这个问题,但这似乎对于这样的事情来说太多了。
我的问题是,是否有办法只使用CSS,将包含图像的宽度传递给:在此之前< li>,以便:before和:after伪元素继承原始元素的宽度和高度。
基本页面布局:
<ul>
<li>
<img src="foo" />
</li>
</ul>
# css style simplefied
ul{ float:left; list-style:none}
li{float:left;}
li img{float:left}
li:before{
content:"":
position:relative;
position:absolute;
float:left;
box-shadow:0 1px 2px rgba(0,0,0,0.4);
}
PS:所需的兼容性仅适用于移动Webkit浏览器。
修改
我可以使用Javascript通过以下几行向CSS添加行:
var heightImg = (($('ul li:nth-child(n)').height())) + 'px';
document.styleSheets[1].insertRule('ul li:before { height: ' + heightImg+ '; }', 0);
但这意味着我还必须使用动态ID。这不会很难,但我只是想知道是否只有CSS方式。
答案 0 :(得分:61)
:before
和:after
伪元素是内嵌框。因此,使用display: block;
可能会对您有所帮助。
答案 1 :(得分:3)
li{
float:left;
position:relative;
}
li img{
float:left;
}
li:before{
content:" ":
position:absolute;
width:100%;
height:100%
box-shadow:0 1px 2px rgba(0,0,0,0.4);
}
答案 2 :(得分:2)
似乎content:" ":
与display: block
答案 3 :(得分:0)
尝试:
ul {
position: relative;
}
li:before {
content: '\00a0';
display: block;
float: left;
position: absolute;
height: 100%;
}
它对我有用。
答案 4 :(得分:-1)
position: -ms-page
为我解决了这个问题