对齐 img (float:left) 和 nav (right:float) 的底部

Question

案例：我想要一个 'main menu div'。所有这些都需要左边的徽标和右边的水平导航栏。

.mainmenu {
 
}

#logo {
 float:left;
}

.menu {
    float:right;
 text-align:right;
}

.menu ul {
 list-style: none;
   padding:0;
 margin:0;
}

.menu ul li {
 display:inline;
 padding:1em;
}

<div class="mainmenu clearFix"> 

  <div id="logo">
   <a href="home.html"><img src="img/logo.png"></a>
  </div>
  
  <div class="menu">
   <nav>
    <ul>
      <li><a href="wat.html">What</a></li>
      <li><a href="who.html">Who</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
   </nav> 
  </div>
  
 </div>

问题：由于 float:right，导航栏位于右上角；但我希望它位于右下角，与徽标底部对齐。

问题：我将如何以最简单的方式做到这一点？

谢谢

Answer 1

我更喜欢你使用 Position:relative 和 top

这是演示http://jsfiddle.net/8nnwytbL/318/

Answer 2

因为您希望导航栏位于徽标的右下角.. 您需要做的就是清除第一个浮动

.mainmenu {
}
#logo { float:left;
 }
.menu {
    float:right;
    text-align:right;
}
.menu ul {
    list-style: none;
    padding:0;
    margin:0;
}
.menu ul li {
    display:inline;
    padding:1em;
}
div.clear {
    clear:both; 
}

div class="mainmenu clearFix">

    <div id="logo">
        <a href="home.html"><img src="img/logo.png"></a>
    </div>
    <div class="clear"></div>

    <div class="menu">
        <nav>
            <ul>
              <li><a href="wat.html">What</a></li>
              <li><a href="who.html">Who</a></li>
              <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>  
    </div>

</div>

对齐 img (float:left) 和 nav (right:float) 的底部

Aligning the bottoms of an img (float:left) and a nav (right:float)

html

css

alignment

css-float