gpt4 book ai didi

javascript - 文本和图像高度不匹配

转载 作者:太空宇宙 更新时间:2023-11-04 08:37:12 25 4
gpt4 key购买 nike

文本和图像高度不匹配,刷新后 - 一切正常。感谢您的帮助!

CodePen

$(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>

截图:[图像高度:175 像素,帖子高度:200 像素]

Screenshot

最佳答案

根据您拥有的额外 CSS,可能需要做更多的工作,但还有一些其他事情可以先解决:

  1. jQuery 的 $(element).height() 方法返回一个 number。为此,您需要附加字符串 px,这样分配给图像高度的值就是一个有效的 CSS 长度单位。

  2. 您可能希望等到 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>

关于javascript - 文本和图像高度不匹配,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44377646/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com