根据邻居 div 限制 div 的高度

Question

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

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

感谢任何提示。

编辑：我正在使用 React，所以如果可能的话，我宁愿以任何方式规避 Jquery。

Answer 1

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

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

在CSS，你会做

.monoheight {
    height: 200px;
}

Answer 2

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

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

});

Answer 3

只要您将图像的宽度限制为已知的固定值，那么您就可以使用以下 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>

根据邻居 div 限制 div 的高度

Limit height of div based on neighbor div

html

css

image

height

auto