如何在html中浮動圖像？

簡單的問題：你如何漂浮一幅圖像，而不會粘在最左邊或最右邊？如何在html中浮動圖像？

每當我使用float：left - 它只是完全粘在左邊。

我嘗試使用邊距，但這只是使對象變大，弄亂了其他對象的佈局。

謝謝！

來源

2013-12-09 user3080167

你可以提供代碼示例或js小提琴嗎？ –

http://jsfiddle.net/richirich/vw52e/1/ youtube視頻完全粘在左邊：\ 我想在頁面內部移動它，但不是完全位於中心。 – user3080167

檢查我的答案。如果它對您有用，請務必接受，以便將來可能會提出的問題將得到解答。歡迎來到SO。 –

在包含框上放置一個設置寬度，這樣大小就不會改變，然後將圖像浮動並留有邊距？

來源

2013-12-09 23:40:36 Adam

我試過使用margin或padding，但它只是讓元素更大，然後我不能在它周圍或附近放置任何東西。 – user3080167

將margin-left: 20px;添加到.youtube。將它設置爲你喜歡的任何值：

.youtube { 
    margin-left: 20px; /* set to whatever value you choose */ 
    float: left; 
    height: 360px; 
    width: 640px; 
    clear:both; 
}

旁註，很多你的HTML被打破。例如，缺少</header>結束標記，您的<img />標記沒有正確關閉，並且您還缺少結束標記</div>。

此外，至於W3C標準，你不應該在li標籤（我沒有解決這個問題）中有div。如果您需要執行div，請使用<span>，並將其設置爲display:block。

http://jsfiddle.net/vw52e/3/

來源

2013-12-09 23:46:25

謝謝你的回答Mike。問題是添加邊距會使元素變大，不是嗎？有沒有辦法避免這種情況，或者是將事情放在網頁上的正常方式？最後，它似乎推開了其他的東西，所以它不是很實用.. – user3080167

它不會使元素變大。它只是移動你設置的數量。不知道你說什麼推動。視頻後沒有任何代碼。 –

說實話（不要冒犯），但你的代碼寫得不是很好。所以你的問題可能會在其他地方出現。換句話說，在這個網站是「功能性」之前，你似乎還有一段路要走。 –

如何在html中浮動圖像？

回答

相關問題