javascript - 如何保持两个 div，一个带有文本，另一个带有图像，并排放置，而不垂直扩展？

Question

如果您滚动到投资组合部分，您就会明白我在说什么。我的工作站的屏幕分辨率是 1600x900，它完美地呈现了我在内容 div 中的文本量的网站。但是，如果我让浏览器变窄，div 会变长，这是我不希望发生的。我不知道如何让 div 不扩展到超过图像的高度，这样当用户重新调整浏览器大小时图像下方就没有任何空间。请指教。

<div class="row" id="portfolio">
<div class="span12">
  <div class="row">
    <div class="col-md-8">
      <div class="content">
        <h2>this is the first project</h2>
        <p1>Phasellus vitae sem eu lacus bibendum iaculis eu sit amet augue. Ut aliquet imperdiet sem, vel imperdiet ipsum. Donec ligula elit, vestibulum efficitur nisi non, posuere ornare quam. Ut tempor finibus commodo. Nulla commodo eros nec diam lobortis
          tempus. Nam et purus erat. Nunc metus odio, porttitor in tempus non, viverra at velit. Vestibulum ut ultrices eros.</p1>
      </div>
    </div>
    <div class="col-md-4">
      <div class="image">
        <img src="https://goo.gl/LlkQ2N" />
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-4">
      <div class="image">
        <img src="https://goo.gl/q00U2p" />
      </div>
    </div>
    <div class="col-md-8">
      <div class="content">
        <h2>this is the second project</h2>
        <p1>Phasellus vitae sem eu lacus bibendum iaculis eu sit amet augue. Ut aliquet imperdiet sem, vel imperdiet ipsum. Donec ligula elit, vestibulum efficitur nisi non, posuere ornare quam. Ut tempor finibus commodo. Nulla commodo eros nec diam lobortis
          tempus. Nam et purus erat. Nunc metus odio, porttitor in tempus non, viverra at velit. Vestibulum ut ultrices eros.</p1>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-8">
      <div class="content">
        <h2>this is the third project</h2>
        <p1>Phasellus vitae sem eu lacus bibendum iaculis eu sit amet augue. Ut aliquet imperdiet sem, vel imperdiet ipsum. Donec ligula elit, vestibulum efficitur nisi non, posuere ornare quam. Ut tempor finibus commodo. Nulla commodo eros nec diam lobortis
          tempus. Nam et purus erat. Nunc metus odio, porttitor in tempus non, viverra at velit. Vestibulum ut ultrices eros.</p1>
      </div>
    </div>
    <div class="col-md-4">
      <div class="image">
        <img src="https://goo.gl/yvLkOv" />
      </div>
    </div>
  </div>

</div>

演示 http://codepen.io/mrfishball/pen/QyEqwP (滚动到投资组合部分)

Answer 1

这不是最漂亮的代码片段 - 最好将您自己的类添加到标记中，但我相信这就是您正在寻找的代码:

#portfolio .row {
  position: relative;
}

#portfolio .col-md-4 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

#portfolio .row > div:first-of-type.col-md-4 {
  right: auto;
  left: 0;
}

#portfolio .row > div:last-of-type.col-md-8 {
  margin-left: 33.333333%
}

#portfolio .image {
height: 100%;
}

#portfolio .image > img {
height: 100%;
width: auto;
}

笔:http://codepen.io/anon/pen/dGWYKV