开发日志：设置<DIV>内容不自动换行，及inline后width和height等失效的问题

来源：互联网发布：数据库考试试题及答案编辑：程序博客网时间：2024/05/29 06:32

如果直接使用：

<table><tr><td>显示<div>内容</div></td></tr></table>

本来想【显示】与DIV内的【内容】在同一行上，但如果向上面这样写则会出现【内容】自动换行的效果，使用display: inline可解决这个问题

<table><tr><td>显示<div style="display: inline;">内容</div></td></tr></table>

最近发现一个问题，就是设置display:inline后，width和height属性会失效

<div style="background:#6CF; width:800px; height:300px; text-align:center;"><div style="background:#FC3; text-align:left; padding-left:80px;display:inline; width:300px; height:30px;" >    DIV块:从左上角80px开始    </div>    <div style="background:#6F3; text-align:right; padding-right:80px;display:inline; width:300px; height:50px;">    DIV块:从右上角80px开始    </div></div>

效果如下

解决方案：设置float属性

<div style="background:#6CF; width:800px; height:300px; text-align:center;"><div style="background:#FC3; text-align:left; padding-left:80px;display:inline; float:left; width:300px; height:30px;" >    DIV块:从左上角80px开始    </div>    <div style="background:#6F3; text-align:right; padding-right:80px;display:inline; float:right; width:300px; height:50px;">    DIV块:从右上角80px开始    </div></div>

效果：