侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

CSS:伪元素:before和:after从原始元素继承宽度/高度

2022-09-27 星期二 / 0 评论 / 0 点赞 / 49 阅读 / 1737 字

我使用css伪元素:之前和:之后给一个缩进效果我的一些网站上的图像。但是,如果不指定宽度和高度,这些将不显示。这将让我为每个图像指定一个固定的宽度和高度,我猜这将适用于一个静态网页。 然而,因为

...我使用css伪元素:之前和:之后给一个缩进效果我的一些网站上的图像。但是,如果不指定宽度和高度,这些将不显示。这将让我为每个图像指定一个固定的宽度和高度,我猜这将适用于一个静态网页。

然而,因为这些图像是动态生成的jQuery和用户提交,图像的宽度和高度每次不同。现在我可能可以解决这个与Javascript通过获取图像的宽度,并将其传递给:之前,但这似乎是这样的东西太多的工作。

我的问题是如果有一个方法来做到这一点,只有CSS,包含图像的宽度传递到: li&gt ;,因此:before和:after伪元素继承了原始元素的宽度和高度。

基本页面布局:

<ul>   <li>       <img src="foo" />   </li>   </ul>    # css style simplefiedul{ 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.4);   }

PS:所需的兼容性仅适用于移动Webkit浏览器。

编辑

我可以通过使用下面的行添加行到CSS使用Javascript:

var heightImg = (($('ul li:nth-child(n)').height())) + 'px';    document.styleSheets[1].insertRule('ul li:before { height: ' +  heightImg+ '; }',0);

但这意味着我还必须使用动态id。这不会很难,但我只是想知道是否有一个CSS的方式。

.

解决方法

. :before和:after伪元素是我知道的内联框。因此,使用display:block;可能会帮助你。. ..

广告 广告

评论区