將內容包裝在一個塊上並使其在周圍流動？

是否有可能通過HTML5/CSS創建效果，甚至是一些JS模仿了流動的'流動'內容'障礙'的障礙？ enter image description here 將內容包裝在一個塊上並使其在周圍流動？

就像一個指定寬度和高度的塊div元素在窗口中間居中，所有其他內容會動態調整和「避免」div，當我們向下滾動時。 div始終保持在屏幕中央。

<div id="centerblock"></div> 

<p>Donec ut vestibulum velit. Sed lorem enim, malesuada tristique lacinia eget, tempus eu libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus.Praesent et risus ut neque suscipit sollicitudin vel tristique diam. Nulla molestie sagittis est, gravida aliquet leo faucibus in. Suspendisse volutpat cursus est sed bibendum. Mauris bibendum et eros in malesuada. Nunc rutrum ligula ut vehicula varius. 
</p> 
..More <p> paragraphs..

而CSS我想：

#centerblock { 
    width:200px; 
    height:60px; 
    background:green; 
    margin:auto; 
    position:absolute; 
    z-index:1; 
    top:0; bottom:0; left:0; right:0; 
    display:inline-block; 
} 
* { 
    z-index:1; 
}

試圖構建的效果，但我不知道這是否是可行的，在所有：http://codepen.io/power-inside/pen/yyPzrO

來源

2015-02-07 Irfan

沒有我知道的。看起來像一個複雜的功能。你有什麼理由這樣做？ – Timmerz 2015-02-07 03:25:53

@Timmerz只是想創造一個奇特的效果。 – Irfan 2015-02-07 03:33:43

是的，我想這將是相當複雜的。我會研究碰撞檢測庫，你必須弄清楚所有的數學和調整大小等，讓我知道你是否達到了你想要的效果。我有興趣看到結果。 – Timmerz 2015-02-07 03:40:27

下面是一個例子。

http://jsfiddle.net/ronansmith/u6dtsL6x/

.inside-block { 
    float: left; 
    width: 60px; 
    height: 100px; 
    background-color: green; 
}

這可以使周圍的div的話在3個方向。或者你可以使用float: right;使div保持正確。

來源

2015-02-07 04:01:31 ronan

將內容包裝在一個塊上並使其在周圍流動？

回答

相關問題