使用％寬度的浮動div使用最小/最大寬度和100％高度（響應）

我有2個div，一個需要是固定寬度，另一個需要用戶設備。目前，當低於一定的寬度時，浮動的div跳到單獨的行上。有沒有）的方式來...使用％寬度的浮動div使用最小/最大寬度和100％高度（響應）

1讓他們身體

2的兩個100％的高度）保持在同一行，因此右側的div的寬度可縮小，而左側的div保留它的最小/最大寬度？

此外，70％的正確分額永遠不會佔滿整個可用空間的70％。

我意識到我想要做的是有點矛盾，但不能想辦法繞過它。

HTML

<article> 
</article> 

<section> 
</section>

CSS

article { 
background: blue; 
float: left; 
height: 100px; 
width: 30%; 
min-width: 200px; 
max-width: 200px; 
} 

section { 
background: red; 
float: left; 
height: 100px; 
width: 70%; 
}

來源

2012-04-13 Dan Christian

兩個塊沒有填滿整個頁面的原因是因爲你有最大寬度上的文章設置。儘管寬度設置爲30％，但最大寬度決不允許寬度超過200像素。這意味着因爲節只佔用了寬度的70％，假設頁面寬度的30％大於200px，總會有額外的空白區域。 – dpcasady 2012-04-13 18:40:37

感謝您的回覆，我確實意識到這一點，因此我的矛盾評論，我接受任何新的建議。 – 2012-04-13 18:43:33

看起來像你在下面找到你的答案，只是想確保你瞭解最大寬度:) – dpcasady 2012-04-13 18:47:11

http://jsfiddle.net/fxQfv/3/

article { 
    background: blue; 
    height: 100px; 
    width: 30%; 
    float:left; 
    min-width: 200px; 
    max-width: 200px; 
} 

section { 
    background: red; 
    height: 100px; 
    width: auto; 
}

對於你的身高問題就來看看這篇文章：http://www.alistapart.com/articles/fauxcolumns/

來源

2012-04-13 18:37:56 cp3

太簡單了！謝謝。猜猜我甚至不需要30％的工作 – 2012-04-13 18:43:56

工程，但這是非常靜態的。 – 2014-02-14 19:12:52

你的問題是這兩條線：

min-width: 200px; 
max-width: 200px;

他們違背這一行：

width: 30%;

section將始終爲7寬度的0％，但article始終爲200px。如果你刪除這兩條線，它將工作。

如果你需要的文章是200px，該部分應該是width: auto，儘管我不知道所有瀏覽器中的行爲是否有保證。

來源

2012-04-13 18:40:22

感謝您的幫助，我覺得您誤解了我最初的問題，儘管 – 2012-04-13 18:42:57

剛剛看到您的編輯，再次感謝，似乎做的伎倆 – 2012-04-13 18:46:10

我不認爲你的想法可以分別使用這兩個元素來實現。相反，我會把<article>到<section>，然後使部分

section { 
width: 100%; 
}

這樣，在<section>總是會適應行和<article>仍然可以是一個固定的寬度。此外，您不需要輸入<article>的百分比寬度，因爲設置max-width = max-height將替換它。

http://jsfiddle.net/fxQfv/4/

來源

2012-04-13 18:51:11

使用％寬度的浮動div使用最小/最大寬度和100％高度（響應）

回答

相關問題