css - 如何修复在 CSS 中使用非精确小数时产生的错误？

Question

我在我正在开发的网站上使用了“target/context = result”技巧，但我遇到了一个相当大的问题:等式返回百分比太长了，我找不到计算器完成不四舍五入的等式。正如您在下面看到的，我将高度设置为百分比而不是自动，就好像该值为自动一样，它会切掉我需要的 div 的底部。所以，我将它设置为最接近的四舍五入小数 - 一开始看起来不错，然后调整大小，它变得比我需要的更大/更小。为了引用它应该是什么样子，它应该与旁边的图像高度相同。由于版权原因，我无法提供图像，但图像大小为 800 x 440 像素。只需将第二条规则应用于它。谢谢。

#comment-1 {
    width: 6.25%;
    height: 30.09781790820166%;
    padding: 20px;
    float: left;
    color: #FFF;
    background-color: #CC521D;
    font-family: "Lato", Arial, Helvetica, sans-serif;
    font-size: 125%;
}

#image-1 {
    width: 31.25%;
    height: auto;
    float: left;
    margin-right: 20px; 
}

编辑:刚注意到，我忘了提供上下文:高度为 1329 像素，宽度为 2560 像素。

Answer 1

如果未设置父元素高度，高度百分比将基于父元素宽度!这意味着你需要另一种方法，其中一个解决方案是:让你的图像容器是 relative，填充留 6.25%，而不是你的评论是 absolute 和 left, top, bottom: 0(宽度可以计算为6.25/31.25*100)。这样图像高度将控制评论高度。

<style type="text/css">
    .comment_and_image {
        position: relative;
        width: 31.25%;
        padding-left: 6.25%;
        float: left;
    }
    .comment {
        width: 20%; /* 6.25/31.25*100 */
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
    }
    .image {
        height: auto;
        width: 100%;
    }
</style>

<div class="comment_and_image">
    <div class="comment">text</div>
    <img class="image" src="path_to_image.jpg" alt="Image" />
</div>