文本和图像高度不匹配

刷新后文本和图像高度不匹配 - 一切正常。谢谢你的帮助！文本和图像高度不匹配

$(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行，它会更小。 :) –

文本和图像高度不匹配

回答

相关问题