在容器 div 内并排浮动 2 个元素

Question

这应该是一件容易的事，但我在过去的 30 分钟里一直在看它，但无法弄清楚。

这里是html代码；

<div style="width: 250px;">
  <img style="float: left; width: 20px;" src="public/_images/ok_kutu.jpg" alt="kutu" /> 
  <h3 style="float: left; width: 50px; color: #FFF; font-size: 18px;">Jobs</h3>
  <div style="clear: left;"></div>
</div>

我想要的只是将 img 和 h3 项目并排放置。 相反，我得到了这个；

Answer 1

默认情况下，<h3> 元素具有顶部和底部边距。您应该使用margin: 0 删除它们：

<div style="width: 250px;">
    <img style="float: left; width: 20px;" src="public/_images/ok_kutu.jpg" alt="kutu" /> 
    <h3 style="float: left; width: 50px; color: #FFF; font-size: 18px;margin:0">Jobs</h3>
    <div style="clear: left;"></div>
</div>

另外，也许考虑使用外部 CSS，而不是将所有样式信息内联。从长远来看，它会更容易维护......

请看这个jsFiddle demo

Answer 2

你可以使用：

display: inline-block;

代替：

float: left;

一切都会好起来的:)

这是演示（更改图片）：http://jsfiddle.net/JjTfy/2/

P.S - 你真的应该使用单独的 CSS 样式表而不是内联样式。