在容器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样式表而不是内联样式。