<style type="text/css">
#kc_01 { float:left;}
</style>
<ul>
<div id="kc_01"><img src="kc01.jpg" /></div>
<div ><img src="kc11.jpg" /></div>
</ul>

------解决方案--------------------
你知道么 行内元素有个特性 它会围绕浮动元素  
所以你的img或者文字就会围绕在浮动元素的周围

你的代码我试过了 IETester以及FF等都会出现两张图片的

给你个例子 你自己看一下 会有一点帮助  
书上的东西你要自己敲一遍 有时候写的不完善 害死人

HTML code

<ul>
        <div style="float:left;border:1px solid red;width:200px;height:200px;background-color:red;"></div>
        <div style="border:1px solid blue;width:300px;height:200px;background-color:blue;">
            <div style="border:1px solid yellow;width:250px;height:200px;background-color:yellow;"></div>
        </div>
    </ul>

------解决方案--------------------
块元素就是占据整行的宽度 即使你定义了长宽 下面的元素还是会重起一行 如:div hr ul li form等
行内元素就是会在同一行内排列 如:span a strong em等

浮动元素后紧跟非浮动元素 在IE6下会有3px间隙 记得用margin-right:-3px让出空间 使非浮动元素左移 填补那点空白