Question

我希望能够仅使用CSS在网页上圈出元素。我有一些几乎可以正常工作的代码 - 它会在元素周围生成一个圆圈，但是

宽度与内容的宽度不一致（总是太大），
我似乎无法让它以孩子为中心

以下代码是我目前的代码

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>MWE</title>

</head>
<body>
<style>
div.ccc {
  display: run-in;
  position: relative;
}

div.ccc:after {
  display: inline-block;
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  bottom: -50px;
  left: -50px;
  opacity: 0.7;

  border: 5px solid red;
  border-radius: 50%;
  padding: 10px;
}


</style>


<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg" width="10%">
</div>

<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
</div>

</body>

产生以下内容。请注意，圆圈不是图像的中心，宽度是关闭的。

是否可以仅使用CSS修复此问题？

Answer 1

将div设置为display：inline-block，它将起作用。

默认情况下，Div是块级元素，这意味着它们将占据宽度的100％。

编辑：问题是您使用％来调整图片大小，这取决于父级宽度...我们正在尝试让父级相应地调整父级...这样就赢了＆＃39工作。

据我所知，最接近的是避免在％上调整图像大小，并将div显示为内联块

＆＃13;

div.ccc {
  position: relative;
  display:inline-block;
}

div.ccc:after {
  display: inline-block;
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  bottom: -50px;
  left: -50px;
  opacity: 0.7;

  border: 5px solid red;
  border-radius: 50%;
  padding: 10px;
}

.small{
  width:200px;
}

＆＃13;

<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg" class="small">
</div>

<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
</div>

＆＃13;

如果您确实需要将其大小设置为％，则需要添加另一个容器并将其大小改为

＆＃13;

div.ccc {
  position: relative;
  display:inline-block;
}

div.ccc:after {
  display: inline-block;
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  bottom: -50px;
  left: -50px;
  opacity: 0.7;

  border: 5px solid red;
  border-radius: 50%;
  padding: 10px;
}

.img-container{
  display:inline-block;
}

.img-container img{width:100%}

.small{
  width:200px;
}

＆＃13;

<div class="ccc">
  <div class="img-container small">
    <img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
  </div>
</div>

<div class="ccc">
  <div class="img-container">
    <img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
  </div>
</div>

＆＃13;

Answer 2

默认情况下，div的宽度为100％，这就是为什么所有圈子都很大而且不以孩子为中心的原因。

为什么不将红色圆圈边框放在img标签而不是div上？即，首先将圆圈放在子元素上。

另一种选择是通过在div类上设置display: inline-block来使.ccc与内容的大小相匹配。

如果这些都不是一个选项，我很确定没有纯粹的CSS方式。

CSS圈以匹配div内容的宽度

2 个答案: