Question

我正在尝试创建一个像图像一样的页面。 A＆amp; B是动态高度，它们的宽度是静态的。 C是静态尺寸高度500px，宽度500px。

如何制作以便每个A＆amp; A中的内容高度B不会超过说500px的高度而彼此调整大小

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

Answer 1

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

max-height:500px;。

只要您正确地逃离浮子（如果有的话），它就会将其切断。

您可能需要添加

overflow:hidden;

如果a或b中的内容扩展为500px，则会将其从页面中删除。

我理解问题的完整代码是

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/ ＆lt; - 这些是你的朋友。

内容拟合和重新调整大小容器的大小

1 个答案: