Question

文本和图像高度不匹配，刷新后 - 一切都很好。谢谢你的帮助！

＆＃13;

$(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' })`;
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

截图： [图像高度：175px，后置高度：200px ]

Answer 1

根据您拥有的其他CSS，可能会有更多工作，但还有其他一些事情可以先解决：

jQuery的$(element).height()方法返回number。为此，您需要附加字符串px，因此分配给图像高度的值是一个有效的CSS长度单位。
您可能希望等到DOMContentLoaded或类似事件，也可以通过jQuery的$(window).ready(callback)函数访问。这将确保在测量其高度之前呈现DOM中的文本（尽管如果您使用需要更长时间加载的外部Web字体，这可能也会稍后更改。）

＆＃13;

$(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' })`;
}

＆＃13;

<!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>

＆＃13;

Answer 2

为了记录，在CSS中你有'min-height：100px;'这会覆盖你的javascript！

文字和图像高度不匹配

2 个答案: