如何保持絕對定位元素的佈局大小調整比例

我已經遞交了一堆頁面，用奇怪的不規則佈局進行編碼。以下是我需要創建的一個示例。如何保持絕對定位元素的佈局大小調整比例

關於這個關鍵點;

的元素需要被定位的像素完美的，因爲每實體模型。
在調整窗口大小時，所有元素和位置都需要按比例縮小/增大。
容器的大小也需要按比例調整大小，因爲佈局下會有更多內容。

考慮到每個元素都需要有特定的定位，很明顯使用絕對定位。我還注意到，由於佈局需要保持相稱，因此需要按百分比進行定位。

對於圖像我可以將寬度設置爲百分比和高度自動。元素可以沿着x軸定位一個百分比。

但是當我需要從頂部定位時，問題就出現了。

如果我聲明一個元素從頂部開始說20％，那麼當調整頁面大小時，這個定位不會成比例變化。此外，包含塊將需要有一個聲明的高度。

我可以看到這個工作的唯一方法是用一些javaScript技巧。

但這看起來很簡單的佈局似乎很挑剔。並且不建議依靠javaScript來維護佈局。

必須有更好的解決方案，我經常看到這樣的不規則佈局。

我已經看過Flexbox，但我無法想象它在這種情況下如何幫助我。

你會如何解決這個佈局？

來源

2016-01-12 bazzlebrush

您可以在使用「填充底絕招」根據其寬度其比例保持包裝包裹的一切。因爲父元素的高度現在取決於文檔的寬度，所以給予子元素的top和bottom屬性的所有百分比值都將受頁面寬度（而不是高度）的影響。

main { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 0; 
 
    padding-bottom: 120%; 
 
} 
 

 
div { 
 
    background: red; 
 
    position: absolute; 
 
} 
 

 
.one { 
 
    width: 40%; 
 
    height: 40%; 
 
    top: 10%; 
 
    left: 40%; 
 
} 
 

 
.two { 
 
    width: 50%; 
 
    height: 20%; 
 
    top: 55%; 
 
    left: 15%; 
 
} 
 

 
.three { 
 
    width: 20%; 
 
    height: 30%; 
 
    top: 60%; 
 
    left: 70%; 
 
}

<main> 
 
    <div class="one"></div> 
 
    <div class="two"></div> 
 
    <div class="three"></div> 
 
</main>

來源

2016-01-12 22:53:37 sean

Codepen鏈接是404'd，任何更新鏈接的機會？ – Sjrsmile

@Sjrsmile更新了答案中的示例。感謝您收集損壞的codepen鏈接 – sean

謝謝@sean！欣賞你的時間。 – Sjrsmile

嘗試使用這種伎倆來擴展您的集裝箱比例

<div class="container"> 
    <div class="container-inner-wrap"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    </div> 
</div> 

.container { 
    position: relative; 
    display: inline-block; 
    width: 75%; // Choose the width you want. 
} 

.container:after { 
    padding-top: [$height/$width * 100] %; 
    content: ''; 
    display: block; 
} 

.container-inner-wrap { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
}

其中$高度和寬度$是數字 - 高度的價值和寬度你想你的容器中。你應該放在那裏的實際價值是當你將理想高度除以寬度並乘以100％（單位將爲％）時得到的結果。你得到的是容器的縱橫比，無論你的瀏覽器大小如何，它都會保持這個尺寸和形狀。

你也可以在你所有的盒子上使用它，只要確保你有那個絕對位於裏面的內包裝。如果我正在構建這個佈局，我肯定會使用這個技巧。

這裏的其他人使用這個人的例子：http://wellcaffeinated.net/articles/2012/12/10/very-simple-css-only-proportional-resizing-of-elements/

來源

2016-01-12 22:51:59 ingridly

嘛含咖啡因的鏈路斷開，更新的任何機會呢？ – Sjrsmile

如何保持絕對定位元素的佈局大小調整比例

回答

相關問題