将两个元素放在一起，浮动会使img消失

Question

我是设计新手，我需要将两个img放在一起，两者之间有一些空间。 这是目前我的网站看起来：不要担心中断，它应该是这样的。我需要准备这个以允许我稍后在其上添加响应元素，这样我就不能使用绝对位置或任何将图像锁定到位的东西。

两幅图像的高度均为125像素。当我向左或向右浮动图片时，图片在我的网页边缘显示95％被截断。我不明白为什么它在彼此之下，似乎有足够的空间让第二张图像处于同一水平。

到目前为止我所拥有的内容：“navi”是我的容器或包装器... mainlogo和slidertop我曾经进行过实验，目前每个都没有代码。

<div id="navi">
<div id="mainlogo"><header><a href="#"></a></header></div>
<div id="slidertop"><header id="topad"><a href="#"></a></header></div>
<div style="clear:both"></div>
</div>

#navi{
height: 130px;
}
#mainlogo{
}
#slidertop{
}

这就是Im调用我的图像的方式：

header{
background: url(../Images/logo1.gif) no-repeat 15% 0px;
border: none;
height: 125px;
top:100px;
}
header#topad{
background: url(../Images/TopAd.gif) no-repeat 80% 0px;
border: none;
height: 125px;
vertical-align: middle;
}

Answer 1

你试过浮动div吗？

#mainlogo{
    float: left;
}
#slidertop{
    float: left;
}

Answer 2

在您发布的原始代码中，我认为div都是可用宽度的100％，它们将在页面上显示在彼此的顶部。如果您在每个div周围临时添加彩色边框，您可以自己看到这一点，这样您就可以看到它们的位置。

如果你想要它们并排，你必须添加样式来实现这一目标。例如，您可以浮动它们并指定宽度：

header { width: 45%; float: left; }
header#topad { float: right;}

例如：http://codepen.io/anon/pen/ynuoa