javascript - 保持向右浮动内容的高度与向左浮动的兄弟 div 相同，响应式

Question

我有以下结构:

<div class="wrapper1">
     <div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
     <div class="right">some content here</div>
</div>
<div class="items">
  <ul><li></li></ul>
</div>

以上布局用于响应式网站。因此在调整窗口大小或在不同设备上加载页面时，右侧 div 中的内容应始终保持与左侧 div 相同的高度。

此外，我必须在右侧 div 中内容的最后一个字符结束处响应地附加一个链接“更多 >>”。

我已经为右侧的 div 使用了溢出隐藏属性，我正在尝试使用媒体查询根据窗口宽度为右侧的 div 提供一些高度。尝试了不同的方法，但由于文本数量会响应地变化，因此很难将更多链接附加到最后一个字符。

此外，我尝试使用 jquery/jscript 来检测页面加载时左侧 div 的高度，以便将右侧 div 的高度设置为与使用 .outerheight() 属性相同，但在页面初始加载时我是无法获取以像素为单位的高度，因为左侧 div 中的图像宽度设置为 100%。

此外，这里还有两个主要问题，

1)我响应式地设置左边div 的高度和右边div 的高度相同。此处应始终隐藏要显示在右侧 div 中的额外内容。

2) 在左侧 div 内容的最后可见行的最后一个字符响应的位置追加更多链接。

谁能提出一些解决方案。

Answer 1

使用 flexbox，列自动共享相同的高度，无需任何 javascript。

.wrapper {
  display: flex; 
}

.left {
  background: yellow;
  flex: 1;
}

.right {
  background: red;
  flex: 1;
}

<div class="wrapper">
     <div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
     <div class="right">some content here</div>
</div>