在容器 div 内并排浮动 2 个元素 [英] Float 2 elements side by side inside a container div

问题描述

这应该是一项简单的任务，但我在过去 30 分钟内一直在研究它，但无法弄清楚.

这是html代码；

<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>

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

解决方案

默认情况下，

元素具有顶部和底部边距.您应该使用 margin: 0:

删除它们

<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>

此外，也许可以考虑使用外部 CSS，而不是将所有样式信息内联.从长远来看，维护起来会容易得多...

请看这个 jsFiddle 演示

This is supposed to be an easy task, but I've been looking at it for the last 30 minutes and couldn't figure it out.

Here is the html code;

<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>

All i want is keeping the img and h3 items side by side. Instead I'm getting this;

解决方案

By default, <h3> elements have a top and bottom margin. You should remove them using 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>

Also, maybe look into using external CSS, rather than placing all of your style information inline. It will be much easier to maintain in the long run...

Please see this jsFiddle demo

这篇关于在容器 div 内并排浮动 2 个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！