文本和圖像高度不匹配

刷新後文本和圖像高度不匹配 - 一切正常。謝謝你的幫助！文本和圖像高度不匹配

$(document).ready(function() { 
 
    $(window).resize(function() { 
 
    processPost(); 
 
    }); 
 

 
    function processPost() { 
 
    $('.post').each(function(i, e) { 
 
     $image = $(e).children('.post-image'), 
 
     $data = $(e).children('.post-data'); 
 
     $image.css({ 
 
     'background-image': isExist($image.attr('image-url')), 
 
     'height': $data.height(), 
 
     }); 
 
    }); 
 
    } 
 
    processPost(); 
 

 
    function isExist(data) { 
 
    return `url(${ (data !== undefined && data !== '') ? data : '/data/no-photo.jpg' })`; 
 
    } 
 
});

.post { 
 
    display: table; 
 
    margin: 4% 2%; 
 
    padding: .6em 1em; 
 
    background-color: #fefefe; 
 
    border-radius: 2px; 
 
} 
 
.post-cell, .post-image, .post-data { 
 
    display: inline-table; 
 
} 
 
.post-cell { 
 
    width: 100%; 
 
} 
 
.post-cell h4, .post-cell p { 
 
    margin: 0; 
 
    padding: .2em 0; 
 
} 
 
.post-cell h4 { 
 
    font-size: 1.5em; 
 
} 
 
.post-cell p { 
 
    color: #d7d7d7; 
 
} 
 
.post-image { 
 
    float: left; 
 
    width: 39%; 
 
    background-size: cover; 
 
    background-position: center; 
 
    border-radius: 2px; 
 
    min-height: 100px; 
 
    max-height: 300px; 
 
} 
 
.post-data { 
 
    padding-left: 2%; 
 
    width: 59%; 
 
} 
 
.post-data p { 
 
    margin: 0; 
 
} 
 
.text-right { 
 
    text-align: right !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="post"> 
 
    <div class="post-cell"> 
 
    <h4>Heading</h4> 
 
    </div> 
 
    <div class="post-image" image-url="http://www.openarium.ru/фото/грузия/тбилиси/дикие-горы-тушети.jpg"> 
 
    </div> 
 
    <div class="post-data"> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    </div> 
 
    <div class="post-cell text-right"> 
 
    <p>meta, tag, metatag, meta-tag</p> 
 
    </div> 
 
</div>

截圖： [圖片高度：175px，郵政高度：200像素]

來源

2017-06-05 Nick Deny

歡迎來到StackOverflow，你的問題應該包含一個[**最小，完整和可驗證的例子**]（http://stackoverflow.com/help/mcve）。 – hungerstar

你的文本容器有恆定的寬度嗎？你可以爲此粘貼css嗎？ – Joint

一些CSS會很好 –

取決於你有什麼額外的CSS，可能有比這更多的工作，但也有可能首先被解決了幾個其他的事情：

jQuery的$(element).height()方法返回一個number。爲此，您需要附加字符串px，因此分配給圖像高度的值是一個有效的CSS長度單位。
您可能要等到DOMContentLoaded或類似事件，這也可以通過jQuery的$(window).ready(callback)函數訪問。這將確保DOM中的文本在測量其高度之前被呈現（儘管如果您使用的是需要更長時間加載的外部網絡字體，則以後也可能會更改）。

$(window).ready(processPost); // NOTE 
 

 
function processPost() { 
 
    $('.post').each(function(i, e) { 
 
    $image = $(e).children('.post-image'), 
 
     $data = $(e).children('.post-data'); 
 
    $image.css({ 
 
     'background-image': isExist($image.attr('image-url')), 
 
     'height': $data.height() + 'px', // NOTE 
 
    }); 
 
    }); 
 
} 
 

 

 
function isExist(data) { 
 
    return `url(${ (data !== undefined && data !== '') ? data : '/data/no-photo.jpg' })`; 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="post"> 
 
    <div class="post-cell"> 
 
     <h4>Heading</h4> 
 
    </div> 
 
    <div class="post-image" image-url="http://www.openarium.ru/фото/грузия/тбилиси/дикие-горы-тушети.jpg"> 
 
    </div> 
 
    <div class="post-data"> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </p> 
 
    </div> 
 
    <div class="post-cell text-right"> 
 
     <p>meta, tag, metatag, meta-tag</p> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-06-05 21:33:48 nikulis

取決於他的CSS他可能還需要outerHeight（）或outerHeight（true）以及。 –

@SandraWillford它沒有幫助。該錯誤只出現在Safari中，在其他瀏覽器中一切正常。我認爲，這不是關鍵。：）謝謝！ –

@SandraWillford我同時提出了新的帖子佈局，並修正了這個錯誤。 :) –

備案，在你的CSS，你有 '最小高度：100像素;'這是重寫你的JavaScript！

來源

2017-06-05 22:01:52

圖片大於100像素，如果.post-data p <3-4行，它會更小。 :) –

文本和圖像高度不匹配

回答

相關問題