Question

在这里有点菜鸟，但希望有人能帮忙。我有一张左手边的图片，占一个flexbox div的2/3，而一个右手边的文本div，占了1/3。

我如何才能使右侧div跟随左侧图片的高度，以便即使在调整视口大小的情况下，溢出滚动也与图片的底部一致。

下面是我当前的代码，但只能在一种尺寸下看起来不错。

感谢任何反馈。

理查德

approach-wrapper {
  display: flex;
   margin-bottom: 2%;
}

.approach-wrapper img { 
 width:100%;
}

.approach-wrapper .section-left {
 width: 66%;
 height: 100%;
}

.approach-wrapper .section-right {
  width: 34%;
  height:605px;
  padding-left: 2%;
  overflow:auto;
 }
 
.approach-wrapper:after {
  content: "";
  display: table;
  clear: both;
}

<div class="approach-wrapper">
	<div class="section-left">
		<img alt="test" src="img/picture.jpg" /> </div>
	<div class="section-right approach-content">
		<p>Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br>
		Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br>
		Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br>
		Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br>
		<br><br><br><br><br><br><br><br><br><br><br><br>Loads of text12345678910<br>
		Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br>
		Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br>
		Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br>
		Loads of text12345678910<br>Loads of text12345678910<br></p>
	</div>
</div>

Answer 1

css中的类approach-wrapper中缺少css（。）点，我也删除了 left 和 right 类的高度因为不需要身高。

.approach-wrapper {
  display: flex;
  margin-bottom: 2%;
}

.approach-wrapper img {
  width: 100%;
}

.approach-wrapper .section-left {
  width: 66%;
}

.approach-wrapper .section-right {
  width: 34%;
  padding-left: 2%;
  overflow: auto;
}

.approach-wrapper:after {
  content: "";
  display: table;
  clear: both;
}

<div class="approach-wrapper">
  <div class="section-left">
    <img alt="test" src="img/picture.jpg" /> </div>
  <div class="section-right approach-content">
    <p>Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br> Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br> Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br>      Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br>
      <br><br><br><br><br><br><br><br><br><br><br><br>Loads of text12345678910<br> Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br> Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br>      Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br> Loads of text12345678910<br>Loads of text12345678910<br></p>
  </div>
</div>

将溢出滚动条与图片高度对齐

1 个答案: