定位DIV正確的方法？

我正在玩DIV，想知道如何實現某些東西的最佳方法。定位DIV正確的方法？

我希望得到以下結果：

    ------------------------------| 
        |   DIV 1    | 
        ------------------------------| 
         | DIV 2 |   | DIV 3|| 
         ---------   --------| 
               | << Far right of web page

基本上要DIV 1出現在頁面的右側。
在它想一些小的圖像出現在沿DIV 1的底部某些位置（甚至如此接近可能去稍微落後DIV 1）

問題我得到的是兩種：
1.圖像出現在同一行DIV 1
2後右位置可以得到DIV 2 DIV，但隨後3出現DIV 2下，而不是在同一條線上，因爲它

什麼是實現這一目標的最佳方法是什麼？

來源

2013-05-20 user1981823

什麼是HTML和CSS你現在正在嘗試？您是否可以在將它修剪到僅用於重現效果的裸碼之後將它發佈到這裏？ –

請附上jsfiddle。或代碼。 – ZZPLKF

首先將3個div放入您的問題中放入一個較大的div中。這將有助於讓他們更好地受到控制。 –

http://jsfiddle.net/A5tP2/不知道這是你在找什麼，但沒有任何代碼我不能真正幫助你在你有什麼。但是，是的。

HTML

<div id="wrapper"> 
    <div id="oneWrap"> 
     <div id="one"> 
     </div> 
    </div> 
    <div class="image"> 
      image 
    </div> 
    <div class="image"> 
      image 
    </div> 
</div>

CSS

#wrapper{ 
    width: 500px; 
    height: 500px; 
    background: blue; 
} 
#oneWrap{ 
    width: 500px; 
    height: 100px; 
} 
#one{ 
    width: 300px; 
    height: 100px; 
    background: orange; 
    float: right; 
} 
.image{ 
    margin-top: 20px; 
    margin-left: 50px; 
    width: 100px; 
    height: 100px; 
    background: purple; 
    float: right;  
    color: white; 
}

來源

2013-05-20 20:33:06 ZZPLKF

把較小的div另一個div中，能夠給他們更精確地定位：

<head> 
<style> 
    #div1{ 
     float:right; 
    } 
    #div-helper{ 
     clear:both; 
    } 
    #div2{ 
     float:left; 
    } 
    #div3{ 
     float:right; 
    } 
</style> 
</head> 

<body> 
    <div id="div1">1</div> 
    <div id="div-helper"> 
     <div id="div2">2</div> 
     <div id="div3">3</div> 
    </div> 
</body>

來源

2013-05-20 20:34:49

定位DIV正確的方法？

回答

相關問題