javascript - 内容适合并重新调整到 div 容器的大小

Question

我正在尝试制作一个像图像一样设置的页面。A & B 是动态高度，它们的宽度是静态的。C 是一个静态大小，高度为 500 像素，宽度为 500 像素。

我如何使每个 A 和 B 中的内容高度相互调整而不超过 500px 的高度

http://i47.tinypic.com/zvyd7d.png

Answer 1

将此添加到 a 和 b 的 CSS 中。

max-height:500px;.

只要你正确地逃离你的浮动（如果有的话），它就会在那里切断它。

您可能需要添加

overflow:hidden;

如果您在 a 或 b 中的内容扩展了 500 像素，这将使其无法在页面中看到。

据我了解问题的完整代码是

CSS

#wrap { width: 700px; height:500px; } /* this combines both static widths and height stays dynamic */
.a, .b { float:left; background-color:#F03; width: 200px; height:50%; min-height:100px; max-height: 500px; }
.c { background-color:#990; width: 500px; height: 500px; float: right; }

HTML

<div id="wrap">
  <div class="c">C</div>
  <div class="a">A</div>
  <div class="b">B</div>
<div style="clear:both;">
</div>

请注意 C 在顶部。那是因为它漂浮到容器的右侧，其余的试图找到 C 没有填充的空间。背景颜色仅用于视觉辅助。

http://jsfiddle.net/QW5MQ/ <-- 这些是你的朋友。