内容拟合和重新调整到div容器

我正在尝试制作像图片一样的页面。 A & B是动态高度，它们的宽度是静态的。 C是一个静态尺寸高度500px和宽度500px。内容拟合和重新调整到div容器

我如何让这个在每个A & B中的内容高度调整相互而不超过的高度说500px的

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

来源

2013-03-01 user2124726

请张贴您的相关代码，并考虑创建一个[小提琴]（http://jsfiddle.net/），再现您的问题 – 2013-03-01 19:09:37

此加入的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/ < - 这些是你的朋友。

来源

2013-03-01 18:53:24

是的，我试过这个和这样的变化。我想更好地描述的是，A就像B的头部，并且头部根据其中的文本量来更改大小。我需要将A和B之间的线路推或拉，整个事情保持500px高。感谢您回复如此迅速和有帮助 – user2124726 2013-03-01 20:53:54

除了假想值（200px，最小高度：100px）之外，这段代码正是你所说的你想要的。我使用了图像。 A是左上方的一个框。它设置为200宽度，最大为500px，因为div是空的，所以占用50％的空间。 – 2013-03-01 20:58:04

http://jsfiddle.net/QW5MQ/1/进一步修改为与您提供的图像完全相同。 – 2013-03-01 21:03:44

内容拟合和重新调整到div容器

回答

相关问题