左邊2個div 1右邊

Question

嗨我試圖讓2個div在左邊對齊一個在右邊。

#div1 #div2 
#div1 #div2 
#div3 #div2 
#div3 
#div3 

，關鍵是我想＃DIV2時由瀏覽器窗口越小＃DIV1和＃DIV3之間裏鑽

此刻＃DIV3僅＃DIV2後啓動，但正確地落入地方，當收縮窗口

#div1 #div2 
#div1 #div2 
     #div2 
#div3 
#div3 
#div3 

Answer 1

這是你想到的嗎？ （手動縮小視口大小在行動中看到的媒體查詢。）

HTML

<div id="div1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div> 
<div id="div2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div> 
<div id="div3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>​ 

CSS

#div1, #div2, #div3 { 
    width: 300px; 
} 

#div1 { 
    border: 1px solid red; 
} 

#div2 { 
    border: 1px solid lime; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
} 

#div3 { 
    border: 1px solid cyan; 
} 

@media screen and (max-width: 600px) { 
#div2 { 
    position: static; 
} 
} 

DEMO

http://jsfiddle.net/z9AsG/

Answer 2

如果的div碰巧有相同數量的元素（如3個鏈接和「的更多「按鈕以獲得更多鏈接），每行可以通過」Override：ellipsis「函數附加，這樣每個div都具有相同的高度，您可以解決您的問題。

否則，如果Div 2是唯一一個出現在右手邊的人，您可以將它設置爲從左邊的固定位置顯示。

我剛剛在小提琴中測試過它。我真的很鄙視這樣做，因爲我覺得它需要它遠離你成長的能力，但是，唉，我希望你把這個學習的榜樣：如果你離開它可以追溯到一個簡單的列走這條線http://jsfiddle.net/nugPA/

：

div#two {position: fixed; left: 150px;} 

這樣的問題在過去曾多次提出過。