定位两个彼此相邻的元素，浮动将使得IMG消失

我是新的设计，我需要两个IMGS放在彼此的旁边，与之间的一些空间。这是目前我的网站看起来是什么：关于切断别担心，它被假设是这样。我需要准备这个，让我后来添加到它，所以我不能用绝对位置或任何将图像锁定到位应答元件。定位两个彼此相邻的元素，浮动将使得IMG消失

This is what currently my site looks

两个图像都在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; 
}

来源

2013-02-07 GivenPie

在您发布的原代码，我想的div是可用的宽度均为100％，他们将出现在页面上彼此顶部。你可以看到自己这一点，如果你暂时补充围绕每个格彩色边框，所以你可以看到他们在哪里。

如果你希望他们并排，你必须添加样式来做到这一点。例如，你可以把它们飘浮并指定宽度：

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

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

来源

2013-02-07 23:53:07 nzt

你是一个天才！感谢您制定我的标题，我非常感谢。浮动错误的东西是毁灭性的！ – GivenPie

您是否尝试过浮动的div？

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

来源

2013-02-07 23:05:52 codingninja

当他们漂浮，图像的95％被切断，所有我看到的是在一侧的小边我页面 – GivenPie

定位两个彼此相邻的元素，浮动将使得IMG消失

回答

相关问题