不把上下用2个div分开，设置好图片的样式后，文字让其自动即可
<style type="text/css">.divbox{ width:500px height:500px border:1px solid red}
.divbox img{ float:left margin-right:10px}
</style>
</head>
<body>
<div class="divbox"><img src="images/bg_grid.png" width="60" height="60" />文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</body>
div里面的文字底部对齐可以通过设置如下css样式实现1
2
display:table-cell /*按照单元格的样式显示元素*/
vertical-align:bottom /*底对齐*/
举个例子：
创建HTML元素
1
<div>文字在div的底部对齐</div>
添加css样式
1
2
3
4
5
div{
width:200pxheight:50px /*设置div的大小*/
border:4px solid #beceeb/*为了便于观察，显示出边框*/
display:table-cell
vertical-align:bottom
显示效果
