文字旁註浮動

sample image 文字旁註浮動

這是我試圖實現的佈局，紅色div是右側浮動的旁註。由於div爲relative，我得到了浮動部分的工作，但我確實在文本（紅色輪廓）中出現了空白。如何爲div分配座標（頂部偏移量），並且不存在其原始流動位置的差距？或者是把div放在流程中的理想位置是解決這個問題的唯一方法？

#article { 
     float:left; 
     width:100%; 
    } 

    #sideNote { 
     position:relative; // produces gap but I'd like to assign offset 
     float:right; 
     width:35%; 
     background:red; 
    } 

<div id='article'> 
    .... 
    <div id='sideNote'> 
    .... 
    </div> 
</div>

最主要的是，爲了分配top:xxem到紅格我需要它有座標矩陣，只能通過從我的理解分配position可以實現的東西，absolute不會在這種情況下工作因爲它不提供文字週轉和relative留下原始流程中的差距

來源

2014-01-08 user3024007

#sidenote應該第一個站INT #article的流量，如果你想讓它ONT右上角。 –

是的，但我怎樣才能抵消它從頂部沒有使它'相對'？ – user3024007

你可以做一個codepen或小提琴，我從你的繪畫和我對英語的平均理解混淆，謝謝 –

我更新@timspqr的小提琴，這可能是你在找什麼。

您可以使用calc

演示說明管理的下降％：http://jsfiddle.net/FcsBb/5/

來源

2014-01-09 09:15:48

文字旁註浮動

回答

相關問題