HTML CSS佈局的概念裏，<img>和text默認都是inline的，但text默認不對應HTML Element（對應DOM的Text node）。當把圖片<img>元素和文本默認放在一起時，由於默認文檔流的流式佈局，<img>圖片元素和文本顯示在一行上，基於文本的baseline位置水平對齊。
奇怪的是，假如圖片的高度不止一行文本時，則圖片的右邊只有一行文本顯示，第2行文本的顯示位置就移動到圖片的下面去了。換言之，不是“徹底”的圖文混排。
通過設置<img>元素的vertical-align: text-top;可以讓圖片和文本的頂端水平對齊，這裏怪異的是，雖然CSS vertical-align: text-top;設置在<img>元素上，但佈局顯示受到影響的卻是後面的文本。
要讓文本完全佔滿圖片右邊的空間，需要對<img>元素設置float: left。
要讓文本在寬度上佔滿圖片右邊的空間，同時文本的左邊界與圖片的右邊界y位置不重疊：做不到。可以把文本用<span>包起來，設置寬度，並float:right;（相當於2列布局），但是這個例子顯示CSS某些理念真的很矬。