0

我是设计新手，我需要将两个 imgs 并排放置，并在它们之间留一些空间。这就是我的网站目前的样子：不要担心被切断，它应该是这样的。我需要准备这个，以便稍后在其上添加响应元素，这样我就不能使用绝对位置或任何将图像锁定到位的东西。

这是我的网站目前的样子

两个图像的高度相同，均为 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{
}

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

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;
}
4

2 回答 2

0

你试过浮动div吗？

#mainlogo{
    float: left;
}
#slidertop{
    float: left;
}
于 2013-02-07T23:05:52.843 回答
0

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

如果您希望它们并排，则必须添加样式来完成此操作。例如，您可以浮动它们并指定宽度：

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

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

于 2013-02-07T23:53:07.310 回答