html - div 与旁边的图像一样高

Question

请检查我制作的这个 fiddle http://jsfiddle.net/2uJKR/80/ .

这是html

<div class="wrap">
 <div class="box">
  <img src="http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/beautiful-woman-holding-an-open-umbrella-100171690.jpg">
 </div>

 <div class="box">
  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 </div>
</div>

风格

img {max-width: 100%;height: auto;width: auto\9; /* ie8 */}
.wrap {margin:0 auto;max-width:500px;width:100%;}
.box {width:50%;float:left;background-color:red;overflow:hidden;}
.bop p {max-height:100px;width:50%;}

我的问题是右侧的 .box 在图像下溢出。我的想象是在缩放时让正确的 .box 和旁边的图像一样高。

我怎么做到的？

Answer 1

这绝对是一个棘手的答案，并没有完全阐明，但我会尽力而为。

CSS 本质上没有任何能力在没有静态尺寸的情况下强制使用相同的 height 选项。

为了使用动态和不断变化的内容，您需要一些JS 魔法。

在一个例子中，我让字体大小保持不变，如果不滚动就无法查看内容。这不会调整 font-size，只会为用户提供一个滚动条以供使用。

http://jsfiddle.net/X8B4r/2/

在另一个示例中，我根据 window 的大小更改字体大小。在您刷新之前，这不会自动调整字体大小，但它会强制页面的初始加载正确适应。

http://jsfiddle.net/X8B4r/3/

这个解决方案适合您吗？