如何解決在CSS中使用非精確小數時創建的錯誤？

我在我正在開發的網站上使用'target/context = result'技巧，但我遇到了一個相當大的問題：公式返回一個百分比這麼長時間，我找不到計算器無需四捨五入完成方程。正如你在下面看到的，我已經將height設置爲百分比而不是auto，就好像這個值是auto，它會切掉div的底部，這是我需要的。所以，我將它設置爲最接近的四捨五入的小數 - 首先看起來很好，然後調整大小，它變得比我需要的大/小。對於它應該是什麼樣子的參考，它應該與它旁邊的圖像具有相同的高度。由於版權原因，我無法提供圖像，但圖像大小爲800 x 440像素。只需應用第二條規則即可。謝謝。如何解決在CSS中使用非精確小數時創建的錯誤？

#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; 
}

編輯：只是注意到了，我忘了提供上下文：高度爲1329px，寬2560px。

來源

2014-11-02 jak1200

如果未設置父元素高度，高度百分比將基於父元素寬度！這意味着你需要另一種方法，其中一個解決方案是：讓你的圖像容器爲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>

來源

2014-11-02 02:33:13 skobaljic

我還沒有能夠測試這個，因爲我一直在我的iPad上，但我已經看過它 - 評論div的高度在哪裏設置？ – jak1200 2014-11-02 04:48:43

這種方式完全取決於圖像的高度。 – skobaljic 2014-11-02 14:02:26

我已經使用skobaljic的答案，只是一個修改後的版本。正如他所說，我已經將頂部和底部規則設置爲0，但不是將左側的值留在0，而是將剩餘邊距設置爲101.875，因爲它是圖像的寬度加15像素，正是我所需要的。

來源

2014-11-02 22:03:49 jak1200

如何解決在CSS中使用非精確小數時創建的錯誤？

回答

相關問題