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某些理念真的很矬。