CSS流動佈局：當容器寬度增加

我只是學習CSS流動佈局&響應式設計，和我想要使用所有百分比值與佈局沒有像素值的基礎上的百分比邊距增長。CSS流動佈局：當容器寬度增加

到目前爲止，這似乎是工作，但在一個地方，我看到的東西我沒有想到的。我試圖在兩個垂直堆疊的div之間放置一個基於容器高度變化的邊距。我希望當我垂直調整窗口大小時，保證金會發生變化，但如果您水平調整它的大小，它也會增長，這是我不想要的。我錯過了什麼？

這裏有一個小提琴。感謝您的幫助提前。

http://jsfiddle.net/gregir/aP5kz/

來源

2012-05-17 Gregir

視口單位爲CSS VW，VH 1vw = 1視口寬度的％ 1vh = 1視口高度 – atilkan

在CSS中，所有四個margin：和padding：百分比都是相對於寬度 ...即使這可能看起來沒有意義。這只是CSS規範的方式，對此你無能爲力。

你可以做你想要與「EX」（或「時間」）來代替呢？這就是我習慣於看到指定邊距/填充的「流動」值......並且它可能比百分比更不成問題。（雖然我沒有相關的第一手經驗，我懷疑您計算的百分比值極長的精度要設置你的更高版本瀏覽器不兼容的問題。我的風格是CSS百分比限制爲整數，如果在所有可能的，或偶爾也許一個或有時甚至可能是小數點後兩位數）

如果你真的想要一個精確的任意大小的空的垂直空間，這是容器的百分比，我想到的第一件事是一個單獨的空< div>帶有「height：nn％」CSS規範。或者也許你指定的其他東西已經在處理你希望的垂直尺寸（因爲在垂直尺寸上它看起來並沒有真正做任何事情）。

來源

2012-05-17 03:34:12

謝謝，查克。我真的需要使用邊界的百分比值，因爲我構建的界面會非常廣泛地波動，從大到小，如果我的大元素變得非常小，但它們之間有1em邊距，看起來很奇怪。關於長期精確度的價值觀，我從A List Apart（http://www.alistapart.com/articles/fluid-images/）中提出了這個想法，並且實際上並沒有計劃將其用於生產。無論如何，你的建議是：一個空白的div會工作得很好;它簡單/優雅，並希望我自己想到它。再次感謝！ – Gregir

http://stackoverflow.com/questions/11003911/why-are-margin-padding-percentages-in-css-always-calculated-against-width –

@Mr。 TA - 我明白爲什麼規範是這樣的。如果上下保證金百分比相對於_height_發生變化，而左右保證金百分比仍然相對於_width_，則無法用百分比指定保證金（和填充），但也可以使用_equal_ all方式。（這也是保持元素縱橫比的怪異CSS hack的基礎。）這些是艱難的選擇;在你斷定它們只是一個「設計缺陷」之前深呼吸。 –

是的，這是意外和反直覺的，但它可以作爲設計&我不知道爲什麼它的工作原理，因爲它確實。請參閱margin-top percentage does not change when window height decreases

來源

2012-05-17 03:12:44

怪異的％。對不起，我在之前的Stack搜索中錯過了這個。不知道如何解決這個問題，但我想我最好讓自己的思維上限。謝謝。 – Gregir

CSS流動佈局：當容器寬度增加

回答

相關問題