html - 通过CSS从宽度值获取高度

Question

有什么方法可以获取以百分比为单位的 px 宽度值并将其应用于另一个元素？

首先看一下我的代码

<div class="col-md-6 height-half">
     .........
</div>

col-md-6 表示它的宽度是 50%；它不是像素。添加的 height-half 表示我想应用 max-高度 宽度的一半。

我可以只用 css 做吗？

这部分并不重要，只是为了发布问题

所以我也可以用它做更多的工作。比如高度四分之一，高度三分之一等等

Answer 1

我可能理解有误。但是尝试使用 :before 伪元素来指定高度。

您已经使用 .col-md-6 处理了宽度。所以在 .height-half 上使用 :before 你应该准备好了:

.height-half:before {
    content:"";
    display:block;
    padding-top:50%;
}

这将使您的 div 的高度等于宽度的 50%。唯一需要注意的是，您需要制作一个绝对位于此 div 内部的容器 div:

<div class="col-md-6 height-half">
    <div class="container">
        .........
    </div>
</div>

因此 CSS 必须为您要以这种方式使用的所有容器执行此操作:

.container {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}

您还需要将所有列设为 position:relative 或某种位置，以便容器看到它被绝对定位到它的容器。

Here's an example fiddle