我寫了一些簡單的html文檔。我有兩個元素裏面：固定寬度的div，和後面的圖像。據我所知，圖像是內聯元素，所以它假設位於div右側，因爲div具有固定的寬度，並且有足夠的圖像空間。相反，圖像低於div元素。所以看起來，div元素的寬度是100％，不管它的大小是多少。爲什麼會發生？ 代碼：Div與固定寬度和內聯元素
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8" />
</head>
<body>
<div style="width:500px;"><p>Some text</p></div>
<img src="someImage.jpeg " />
</body>
</html>
Div是一個塊元素。因此，其他的元素不會被旁邊默認放置 您可以將下面的行添加到您的CSS達到你所期望的行爲：
img {float: right;}
塊元素容忍任何HTML元素旁它是，除非另有規定（例如，通過向另一個元素添加浮點數聲明）。
這就是圖像進入下一行的原因。嘗試使用相同的跨度，圖像不會進入下一行。作爲span的簡單理由是一個內聯元素，如果元素是一個內聯元素，它可以接受旁邊的另一個HTML元素。
希望這會有所幫助！
Div是一個非替換元素，默認情況下是塊級元素。
的width of non-replaced, block level elements in normal flow總是滿足這個等式：
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
所以，當你減少「寬度」至500像素，一個或多個其他屬性（一個或兩個邊距）會自動調整，使平等仍成立。也就是說，包含塊的全部寬度總是被完全使用，並且沒有可用於內聯元素的空間。
這是因爲即使您將固定寬度設置爲div它的默認值display CSS屬性值始終爲block - 佔用整個寬度。發生這種情況是因爲<div>標籤定義了HTML中的水平分割或截面。
例如：
在以下給出的代碼，沒有顯示屬性定義，並且因此它需要的默認值作爲block這就是爲什麼圖像會在div下方。
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8" />
</head>
<body>
<div style="width:500px; background: #cccccc;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<img src="https://www.w3schools.com/css/img_fjords.jpg" />
</body>
</html>而在這個例子中，由於該圖像停留在同一行的段落（查看在整頁的代碼片段）的display屬性設置爲inline-block。
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8" />
</head>
<body>
<div style="width:500px; background: #cccccc; display: inline-block;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<img src="https://www.w3schools.com/css/img_fjords.jpg" />
</body>
</html>希望這有助於:)
那麼，你想知道的div chooosing下一行，而不是在線自動設置背後的原因。
CSS中的一些元素是塊級元素，這意味着它們會自動開始新行。例如，如果創建兩個單個單詞段元素，它們將不會流入對方，而會出現在單獨的行中。其他元素是內聯元素。這意味着它們與之前的內容「一致」。一個例子是一個錨標籤，它可以出現在另一個元素（如段落）中，而不會引起任何額外的空白或新行出現。
欺騙這種佈局模式的一種方法是使用浮動，它允許給定的元素轉移到其一側，並讓其他內容向下流動。右浮動元素將一直推到其容器的右側，並且內容沿着其左側流動，左浮動元素將一直推到左側，其內容沿着其右側流動。
典型的例子是，當你用一個段落拋出一個圖像，並希望兩個並排顯示而不是堆疊。首先，我們創造了一些HTML兩種元素：
<img src="http://domain/200/200/" />
<p>Hello World...</p>
僅此一項，該代碼不會產生我們想要的效果。段落元素是一個塊級元素，它出現在它自己的行上，所以段落和圖像顯示在普通文檔流中。
我們可以通過將圖像浮動到右側來更改此行爲。這樣做的CSS是很基本的：
img {
float: right;
margin: 20px;
}
究竟箱事情的作品
你應該問自己的問題是，「爲什麼？」爲什麼不增加保證金款增加圖像和段落之間的空間？原因在於我們無法理解與該段落有關的盒子模型。
如果您對佈局在基本級別上的工作方式感到懷疑，請嘗試應用一兩個邊框來查看發生了什麼。如果我們在段落中使用這種技術，結果可能會讓您感到驚訝。
p {
border: solid 1px black;
}
正如您所看到的，圖像實際上在段落框內！這解決了我們的邊際謎題。我們添加到段落的任何邊距都會被應用到圖片的右側，這就是爲什麼它不會增加圖片和段落之間的空間。
如果我們希望改變這種行爲，以便段落不會環繞圖像，我們可以將段落浮動到左側並給它一個指定的寬度（不用表達寬度，段落寬度爲100％，將不適合圖像旁邊）。
img {
float: right;
margin: 20px;
}
p {
float: left;
width: 220px;
margin: 20px;
}
希望你明白了......
這是瘋狂的盒子的事情。 :)
'div'是一個塊元素將其更改爲'inline-block' – Akshay
我知道div是塊元素。我的問題不是如何將圖像設置爲div。我只是感興趣，爲什麼內聯元素（圖片）不會去右側的下一個div，因爲有一個房間和div不再佔用100％的寬度了？這聽起來對我來說很合理。 – Zoran