最小高度和最小寬度都不盡如人意

Question

您好所有我有這個markup

<div id="content"> 
    <div id="left"></div> 
    <div id="main"></div> 
</div> 

這css文件

#content{ 
    width:100%; 
    min-width:1024px; 
    height:100%; 
    background-color:red; 
} 
#left{ 
    width:15%; 
    height:100%; 
    min-width:260px; 
    float:left; 
    outline:1px solid white; 
} 
#main{ 
    width:85%; 
    height:100%; 
    min-width:764px; 
    display:inline-block; 
    outline:1px solid green; 
} 

當我調整窗口主DIV剎車和啓動新的生產線，我當我調整窗口的大小時left和maindiv是一條線內content標籤

Answer 1

演示：http://jsfiddle.net/techsin/8gbB2/

問題是與直插塊。在Css中，內聯元素就像字符，字符之間有空格，直接從它們的字體大小派生。

所以，如果你只是把字體大小爲0.它不會像這樣打破。另外，假設這是整個代碼。對於高度工作，你也應該是這樣的：

html, body {height:100%;}

.cont { min-width: 500px; font-size: 0; height: 500px;} 
.left, .main { 
    display: inline-block; 
    height: 100%; 
} 

.left { width: 20%; background-color: red; } 
.main { width: 80%; background-color: blue; } 

，我想指出的......第二件事是要定義寬度的兩個times..which是毫無意義的，因爲只有最後一個考慮在內，取消了之前的一個。 min-width和width屬性將取消對方，取決於哪一個是最新定義的。

Answer 2

#content的父母需要有一個特定的高度。 Without a parent width/height in your original css, it breaks because it doesn't have a height or width to base off of.

如果您刪除基於百分比的尺寸併爲其設置尺寸，則其子尺寸將正確浮動。正如在這裏看到：JSFiddle

#content{ 
    min-width:1024px; 
    height: 100px; 
    background-color:red; 
} 

Answer 3

檢查是否有幫助。

因爲你已經給float: left到#left只是刪除display: inline-block AMD添加margin-left:15%;到#main

和刪除大綱既div's

CSS

#content{ 
    width:100%; 
    min-width:1024px; 
    height:100%; 
    background-color:red; 
} 
#left{ 
    width:15%; 
    height:100%; 
    min-width:260px; 
    float:left; 
    background: #000 
} 
#main{ 
    margin-left:15%; 
    height:100%; 
    background: #ccc 
} 

http://codepen.io/anon/pen/LHGrB