css float：留下位置

爲什麼這不起作用？我用float：left分配了一堆div，並且想要設置第一個元素位置的位置，然後讓所有的兄弟位置更新。css float：留下位置

例如，我設置了第一個元素的css left：50px。我期待兄弟姐妹都會轉移，但他們不會，他們會保持相對於父母的地位。

<style type="text/css"> 
    .wrap {margin:10px; width:auto; height:70px; background:#ccc; position:relative;} 
    .floater {width:50px; height:50px; float:left; background:blue; margin:10px 0px 0px 10px; position:relative; left:10px;} 
</style> 

<div class="wrap"> 
    <div class="floater" style="left:50px; background:red"></div> 
    <div class="floater"></div> 
    <div class="floater"></div> 
    <div class="floater"></div>        
</div>

我注意到，如果我用利潤率左然後我得到我想要的行爲，但我不想使用保證金離開，因爲我需要查詢的div的當前位置，不時。

關於如何實現我想要的任何想法？謝謝。

雅各

來源

2011-07-02 ctown4life

http://jsfiddle.net/userdude/ZurxT/ –

這是正常現象：http://www.w3.org/TR/CSS2/visuren.html#relative定位。其他元素遵循相對定位的元素原始位置的流動。或許，如果你介紹一些關於你正在試圖做的（即爲什麼保證金左不爲你工作，什麼「有必要查詢‘當前位置’」的意思），我們可以提供更好的幫助是什麼。 – Brent

這是left的正確渲染 - left屬性旨在與position一起使用，以調整給定元素的位置而不影響其周圍的任何其他元素。

通常，您會使用left，right,top和bottom爲一組元素創建固定佈局。它們中的每將position:relative;（或absolute或fixed），並有自己的定位這將相對於它們的父元素，而不是相對於彼此放置它們。

這顯然與float的概念很不一致，其中元素相對於彼此非常有定位。

兩種解決方案浮現在腦海中，這將做你想要什麼：

1）浮動元素上放padding-left:50px;容器wrap div元素上，而不是left:50px;因爲你擁有它。

2）使用display:inline-block;代替float:left;。這往往會使佈局工作比浮動更容易。我更喜歡inline-block解決方案，因爲我發現浮動有時會很痛苦，尤其是當我想調整我的佈局時。

見我的jsfiddle例子：http://jsfiddle.net/xgKBc/

來源

2011-07-02 11:47:58 Spudley

啊，顯示：內聯塊的工作方式正是我需要的。非常感謝你的幫助！ – ctown4life

您可以給每一個浮子50像素左側的相對位置。或者，您可以向封裝添加50像素的填充左側。

請參閱demo fiddle兩個例子。

來源

2011-07-02 10:47:41 NGLN

css float：留下位置

回答

相關問題