內容擬合和重新調整到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容器

回答

相關問題