在css中使用元素自己的(不是父元素的)宽度进行计算或百分比，不使用javascript

hs1rzwqc 于 2023-02-20 发布在 Java

关注(0)|答案(6)|浏览(187)

我一直在尝试一种方法，让一个页面元素与它两边的元素重叠，并保持在它们之间的完美中心，我的解决方案是声明position:relative，并将margin的负值设置为大约等于元素宽度的50%，但我所能得到的最接近的值是元素宽度占其父元素宽度的一半：

<!DOCTYPE html>
<html>
 <head>
  <style>
  .clap {
   position:relative;
   margin:auto -16.66%; // This element's share of the entire parent's width = 33.33%
   color:#f00
  }
  </style>
 </head>
 <body>
  <center>
   <span style="display:inline-block">1234567890<span class="clap">1234567890</span>1234567890</span>
  </center>
 </body>
</html>

我试图找到一个只使用CSS的解决方案，它将使用元素本身的宽度，而不是容器的宽度。我不能使用JavaScript来做这件事，因为我计划通过将其嵌入到\style命令中来将其用作MathJaX的修复。（据我所知，MathJaX不提供在其公式中嵌入HTML或JavaScript代码，所以你明白为什么这必须是CSS的。我知道这是可能的脚本。这是可能的CSS，还是我的奋进是没有希望的？

更新：感谢@ Daiwi的建议，我想我已经走上了正确的解决方案之路。感谢大家的回答。以下是修改后的代码：*

.clap {
 position:absolute;
 display:inline-block;
 transform: translate(-50%,0);
 color:#f00                      // for contrast 
}

我很乐意向您展示结果，但无法上传图片，抱歉 *
另一项更新：我上面介绍的解决方案在HTML/CSS上下文中效果最好，但在MathJaX array、matrix或类似的表格环境中会出现问题。具体来说，如果元素太长，它会在左侧剪切。相对定位会将元素向左移动一半，但会在原来的位置留下一个空白！有什么想法可以修补它吗？*

css

来源：https://stackoverflow.com/questions/21638859/using-elements-own-not-parents-width-for-calculation-or-percentage-in-css-w

6条答案

按热度按时间

ygya80vv1#

一个纯粹的CSS解决方案是使用transform。

element
{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

- 注：**

1.您可以使用top: 50%;表示垂直方向，使用left: 50%;表示水平方向。
1.然后使用translateY(-50%)进行垂直居中，使用translateX(-50%)进行水平居中。
1.你也可以使用这个技巧将元素对齐到其父元素的底部或右侧，就像在table-cell中使用100%代替css中的50%。
1.如果你想支持旧的浏览器，那么你需要使用transform的前缀，我强烈推荐在你的工作流程中使用autoprefixer。

赞(0）回复(0）举报 2023-02-20

nwlls2ji2#

由于元素的大小只有在样式化之后才知道，样式应该如何使用它呢？想象一下：某些元素的宽度是其自身宽度的200（=两倍于“normal”的大小）。它的一个子级的宽度设置为父级的100%（=我们的元素）。元素的默认宽度由它的内容决定。我们元素的内容和元素本身一样宽。但是我们元素还没有宽度，因为我们在等它得到默认值，所以我们可以把它翻倍。结果：什么都不会有宽度。
所以：你想做的事情是不可能的，但是CSS3有它的calc，也许你可以用它来接近你想达到的目标？

赞(0）回复(0）举报 2023-02-20

qyzbxkaa3#

我不知道这是不是你想做的，但这里有一个演示：http://cdpn.io/bgkDf
超文本标记语言

<div class="container">
  <div id="box-left"></div>
  <div id="box-overlap">
    <div id="box-overlap-inner"></div>
  </div>
  <div id="box-right"></div>
</div>

中央支助系统

.container > div {
  height: 50px;
  float: left;
}
#box-left {
  width: 40%;
  background-color: red;
}
#box-right {
  width: 60%;
  background-color: green;
}
#box-overlap {
  width: 0;
}
#box-overlap-inner {
  position: relative;
  z-index: 10;
  height: 50px;
  width: 50px;
  transform: translate(-50%,0);
  background-color: rgba(0,0,255,.5);
}

赞(0）回复(0）举报 2023-02-20

2cmtqfgy4#

“使用元素自身的宽度进行计算或百分比”一般情况下：
（可能不是您问题的最佳解决方案，但却是您问题的答案）
目前，attr函数在Chrome中不起作用。如果那样就好了。但是你可以使用变量，如果你自己设置父属性，或者能够使用预定义的父属性。这样你就可以使用calc（）函数来计算你的子属性。
以下是使用浏览器定义的视口大小计算元素宽度的示例：

<!DOCTYPE html>
<html>
 <head>
  <style>
  :root {
     --module-size: 33vw;
   }

  .clap {
   display:inline-block;
   width: calc(var(--module-size) / 2);
   color:#f00;
   border: 1px solid;
  }
  </style>
 </head>
 <body>
  <center>
   <span style="display:inline-block">1234567890
    <span class="clap">1234567890</span>
   1234567890</span>
  </center>
 </body>

这可以用在很多有趣的方面，来简化你的CSS。例如@media风格...

赞(0）回复(0）举报 2023-02-20

bnl4lu3b5#

如果有人（像我一样）试图将元素放在其父元素的中心，请使用以下简单的样式：

.clap {
 position:absolute;
 left: 50%;
 transform: translate(-50%,0);
}

赞(0）回复(0）举报 2023-02-20

643ylb086#

将内容转换为div并将每个div包含在另一个div中以使用margin: auto怎么样？
示例（每个超级div都有自己的颜色，并在高度上移动了一点以保持清晰）：

<html>
 <head>
  <style>
    .dl 
    {
        position: absolute;
        left: 0px;  
        top: 0px;
        max-width: 50%;
        width: 50%;
        text-align: left;
        background: red;
        opacity: 0.5;
    }
    .dls
    {
        margin: auto;
    }
    .dc 
    {
        position: absolute;
        left: 25%;  
        top: 10px;
        max-width: 50%;
        width: 50%;
        text-align: center;
        background: green;
        opacity: 0.5;
        color: white;
    }
    .dcs
    {
        margin: auto;
    }
    .dr 
    {
        position: absolute;
        right: 0px; 
        top: 20px;
        max-width: 50%;
        width: 50%;     
        text-align: right;
        background: blue;
        opacity: 0.5;
        color: white;
    }
    .drs
    {
        margin: auto;
    }
    .overall-width
    {   
        position: absolute;
        left: 0%;
        width:100%;
        height: 20px;
        margin: auto;
    }
  </style>
 </head>
 <body>
    <div class="overall-width">
        <div class="dl">
                <div class="dls">
                1234567890
            </div>
        </div>
        <div class="dc">
                <div class="dcs">
                1234567890
            </div>
        </div>
        <div class="dr">
                <div class="drs">
                1234567890
            </div>
        </div>
    </div>
 </body>
</html>

赞(0）回复(0）举报 2023-02-20

我来回答

在css中使用元素自己的(不是父元素的)宽度进行计算或百分比，不使用javascript

6条答案

相关问题

热门标签

最新问答