问题描述:
我写了段CSS，但是左边的和右边的是在同一行，但右边的跑下边一行了，请教了
CSS代码 ---------------------------------
#icon_left {
height: 72px
width: 60px
font-family: Verdana, Arial, Helvetica, sans-serif, "宋体"
font-size: 12px
font-weight: normal
text-align: center
line-height: 20px
float: left
}
#icon_middle {
height: 72px
width: 60px
font-family: Verdana, Arial, Helvetica, sans-serif, "宋体"
font-size: 12px
font-weight: normal
text-align: center
line-height: 20px
margin-right: auto
margin-left: auto
}
#icon_right {
height: 72px
width: 60px
font-family: Verdana, Arial, Helvetica, sans-serif, "宋体"
font-size: 12px
font-weight: normal
text-align: center
line-height: 20px
float: right
}
DIV代码 -----------------------------------
<div id="icon_left"><img src=images/icon1.gif /><br />
战略&秘籍</div>
<div id="icon_middle"><img src=images/icon1.gif /><br />
地图下载</div>
<div id="icon_right"><img src=images/icon1.gif /><br />
任务下载</div>
解析:
试验了很久没搞出来，估计是float这个属性在块的行分布的计算上存在BUG，你看看这篇文章：
sace/members/persons/lpj/blog/CSS%2CFloat%2C01/
其中有一段：
“如果居左的浮动被放置在其容器的左上脚，并且其后跟随一个同向的浮动，该浮动会被放置在容器右上脚，然后移动到左侧，边界延伸到第一个浮动的右侧时停止。”
“最后的一种行为让我们创建整行的floats，每个都被放置在前一个的右侧（或者左侧，如果使用{float:right}). 同样，当一行中没有足够的空间时，多出来的floats绕到下一行，非常像行内元素那样。这对于制作可点击的图像“简略图”非常方便，因为矩阵会自动调整到屏幕的尺寸，只是简单地在需要时进行回绕。”
似乎说明了你的要求无法实现的原因……
如果你坚持采用这样的页面布局，可以考虑用表格，用表格要快的多了……
哈，参考了这篇文章:
ziyihome/bbs/dispbbs?boardid=13&id=498&page=1
搞出来了，你得把处于中间的那个块在代码中放在最后面……
<style type="text/css">.main{width: 80%margin: 0 autoheight: 100px}
.img{width: 40%float: left}
.img img{height: 100pxmax-width: 100%}
.main p{width: 60%float: leftword-break: break-allline-height: 100px}
</style>
<div class="main">
<div class="img">
<img src="img/xxx.jpg" >
</div>
<p>你的文字</p>
</div>
至于p标签的行高你可以随意调，不懂可以追问或私我
方法和详细的操作步骤如下：
1、第一步，创建一个新的html文件，并将其命名为test.html进行演示，见下图，转到下面的步骤。
2、第二步，执行完上面的操作之后，创建一个div模块并将其class属性设置为mydiv，见下图，转到下面的步骤。
3、第三步，执行完上面的操作之后，使用img图片标签创建两个图片，并且src属性指向不同的图片路径，见下图，转到下面的步骤。
4、第四步，执行完上面的操作之后，使用“
*”初始化页面上所有元素的css样式，将内部边距设置为0，将外部边距设置为0，见下图，转到下面的步骤。
5、第五步，执行完上面的操作之后，设置div的样式，将其宽度设置为700px，将高度设置为400px，边框设置为1px，居中对齐，见下图，转到下面的步骤。
6、第六步，执行完上面的操作之后，设置图片的大小，宽度为280px，高度为200px。
为了使用图片的水平排列，需要使用float属性设置图片浮动的统一方向，见下图，转到下面的步骤。
7、第七步，执行完上面的操作之后，在浏览器中打开“test.html”文件，两张连续的图片已经在同一行，见下图。这样，就解决了这个问题了。
