需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：img{float:left}。
3、浏览器运行index.html页面，此时div标签中的左侧图片与右侧图片通过css调整为了浮动而顶部对齐了。
img是内联元素，p标签是块级元素，所以p标签内的文字换行很正常。strong标签是内联元素，所以会跟img处于同一行，想要img跟strong中的文字垂直居中对齐，需要设置img的vertical-align为middle。这里给你解释一下 <p>也算是一个容器，什么叫容器，比如罐子，碗，等，可以在里面放东西的都属于容器 而<img>不是容器，只是显示反映图片 <p style="text-align:left" 为什么写在<p>里面，举例说明，一个纸盒子，我里面放个球，那么我想把球放到中间，那么你说，我的操作是对于哪个而言呢？ 这个中间，肯定是对应于纸盒子，而非球 所以，这里的style 是写在p里面 而不是 img 至于style="vertical-align我也不大清楚，你可以去百度查一下这个属性的意思。
