Question

如果你滚动到投资组合部分，你会看到我在说什么。我的工作站的屏幕res是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>

DEMO 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

如何保持两个div，一个带有文本，另一个带有图像，并排，没有一个垂直扩展？

1 个答案: