根据邻居 div 限制 div 的高度

Question

我在父 div 中有两个 div 元素。这两个元素应该彼此相邻。左边是图片，右边是文字。 图像是动态加载的，所以我不知道它会是什么高度。我需要父元素具有图像高度的总高度，这可以工作。我只是使用高度设置为自动。问题出在右边的文字上。我希望它填充图像创建的可用高度，但目前，如果文本太长，它将把整个父高度扩展到图像高度。在图像下创建空白。文本可能很长，所以我需要将文本截断并使用溢出集滚动。

问题是我如何使右侧的文本元素尊重左侧元素的高度。我不能让它成为左边元素的子元素，因为它是一个图像。我不知道如何将图像的高度传递给右侧的文本元素。 我能想到的唯一解决方案是将图像也放在右侧，隐藏它并将文本放在它上面。但是看起来很笨拙。

感谢任何提示。

编辑：我正在使用 React，所以我宁愿以任何方式逃避 Jquery。

Answer 1

只要您将图像的宽度限制为已知的固定值，那么您就可以使用以下 HTML 和 CSS 获得动态高度，这也为您在图像旁边提供可滚动的文本：

* {
  margin: 0;
  padding: 0;
}

:root {
  --image-width: 200px;
}

.container {
  position: relative;
  margin: 20px auto;
  max-width: 600px;
}

img {
  width: var(--image-width);
}

p {
  overflow-x: auto;
  position: absolute;
  top: 0;
  left: calc(var(--image-width) + 10px);
  bottom: 0;
  right: 0;
}

<div class="container">
  <img src="https://source.unsplash.com/random/200x200">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed risus ultricies tristique nulla aliquet enim. Sed pulvinar proin gravida hendrerit lectus a. Consectetur a erat nam at lectus urna duis convallis convallis. Egestas integer eget aliquet nibh praesent tristique magna. Molestie a iaculis at erat pellentesque adipiscing. Tincidunt arcu non sodales neque sodales ut etiam. Lobortis mattis aliquam faucibus purus in. Suspendisse ultrices gravida dictum fusce ut placerat orci. Enim ut tellus elementum sagittis vitae et leo duis ut. Adipiscing elit ut aliquam purus sit amet luctus. Sit amet dictum sit amet justo donec. Elementum eu facilisis sed odio. Vitae suscipit tellus mauris a diam maecenas. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Condimentum mattis pellentesque id nibh tortor id. Odio morbi quis commodo odio aenean sed adipiscing diam. Sed cras ornare arcu dui vivamus. Fringilla phasellus faucibus scelerisque eleifend.</p>
</div>

<div class="container">
  <img src="https://source.unsplash.com/random/200x100">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed risus ultricies tristique nulla aliquet enim. Sed pulvinar proin gravida hendrerit lectus a. Consectetur a erat nam at lectus urna duis convallis convallis. Egestas integer eget aliquet nibh praesent tristique magna. Molestie a iaculis at erat pellentesque adipiscing. Tincidunt arcu non sodales neque sodales ut etiam. Lobortis mattis aliquam faucibus purus in. Suspendisse ultrices gravida dictum fusce ut placerat orci. Enim ut tellus elementum sagittis vitae et leo duis ut. Adipiscing elit ut aliquam purus sit amet luctus. Sit amet dictum sit amet justo donec. Elementum eu facilisis sed odio. Vitae suscipit tellus mauris a diam maecenas. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Condimentum mattis pellentesque id nibh tortor id. Odio morbi quis commodo odio aenean sed adipiscing diam. Sed cras ornare arcu dui vivamus. Fringilla phasellus faucibus scelerisque eleifend.</p>
</div>

<div class="container">
  <img src="https://source.unsplash.com/random/200x400">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed risus ultricies tristique nulla aliquet enim. Sed pulvinar proin gravida hendrerit lectus a. Consectetur a erat nam at lectus urna duis convallis convallis. Egestas integer eget aliquet nibh praesent tristique magna. Molestie a iaculis at erat pellentesque adipiscing. Tincidunt arcu non sodales neque sodales ut etiam. Lobortis mattis aliquam faucibus purus in. Suspendisse ultrices gravida dictum fusce ut placerat orci. Enim ut tellus elementum sagittis vitae et leo duis ut. Adipiscing elit ut aliquam purus sit amet luctus. Sit amet dictum sit amet justo donec. Elementum eu facilisis sed odio. Vitae suscipit tellus mauris a diam maecenas. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Condimentum mattis pellentesque id nibh tortor id. Odio morbi quis commodo odio aenean sed adipiscing diam. Sed cras ornare arcu dui vivamus. Fringilla phasellus faucibus scelerisque eleifend.</p>
</div>

<div class="container">
  <img src="https://source.unsplash.com/random/200x200?v=1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed risus ultricies tristique nulla aliquet enim. Sed pulvinar proin gravida hendrerit lectus a. Consectetur a erat nam at lectus urna duis convallis convallis. Egestas integer eget aliquet nibh praesent tristique magna. Molestie a iaculis at erat pellentesque adipiscing. Tincidunt arcu non sodales neque sodales ut etiam. Lobortis mattis aliquam faucibus purus in. Suspendisse ultrices gravida dictum fusce ut placerat orci. Enim ut tellus elementum sagittis vitae et leo duis ut. Adipiscing elit ut aliquam purus sit amet luctus. Sit amet dictum sit amet justo donec. Elementum eu facilisis sed odio. Vitae suscipit tellus mauris a diam maecenas. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Condimentum mattis pellentesque id nibh tortor id. Odio morbi quis commodo odio aenean sed adipiscing diam. Sed cras ornare arcu dui vivamus. Fringilla phasellus faucibus scelerisque eleifend.</p>
</div>

Answer 2

您可以在 jQuery 中使用它（示例）；

$(document).ready( function(){
$("#anotherdiv").css("width", $("#image").width());

});

Answer 3

如果你想给两个元素相同的样式，给他们一个类，像这样

<div class = "monoheight"></div>
<div class = "monoheight"></div>

在 CSS 中，你会这样做

.monoheight {
    height: 200px;
}