Html 如何在两侧放置两个标志和中间的导航？

我正在制作一个网站。我有2个任意的标志和导航栏。我想把它们组织成下图所示的顺序，我尝试了几种方法；清除：两者，浮动：左侧和显示：内联块

有人能以任何方式为我解释一下这个问题吗

这就是我目前正在做的

HTML:

---

导航栏上有

float:center

。没有浮动：中心

如果要使用浮动，需要做的是将所有对象都浮动到左边。因此，将图像、UL和另一个图像设置为

float:left

• 在中间的Facebook和主菜单中添加包装器元素
• 将

  最小宽度

  添加到#导航以防止断线
• 设置2个徽标和中间菜单所有

  float:left

---

有关更多详细信息，请查看更新的链接，我还稍微整理了代码。

我已更新了链接。除了第二张图像（右侧的图像）与左侧的图像不对称外，这似乎有效。也就是说，它下降了

<div id="nav">
<img id="fLogo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
    <ul id="ontop">
        <li><a href="#Facebook">Facebook</a></li>
    </ul>
    <ul id="underneath">
      <li><a href="#Home">Home</a></li>
      <li><a href="#Games">Games</a></li>
      <li><a href="#Trailers">Trailers</a></li>
      <li><a href="#Walkthroughs">Walkthroughs</a></li>
      <li><a href="#Contact">Contact</a></li>
    </ul>
<img id="sLogo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>

#nav {
width: 100%;
margin: 0 0 1em 0;
padding: 0;
overflow:auto;}
#fLogo{
width:100px;
height:100px;
}
#sLogo{
width:100px;
height:100px;
}
#titleBar{
}
#nav ul{
list-style:none;
width:450px;
margin: 0 auto;
padding: 0;
background-color: #333;
overflow:hidden;
float:centre;}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 10px 14px;
font-weight: bold;
color: #E6E600;
border-right: 1px solid #FFFFCC; }
#nav li:first-child a {
border-left: 1px solid #FFFFCC; }
#nav li a:hover {
color: #FF3300;
background-color: #FFFF99; }