html - 对齐 img 的底部(float :left) and a nav (right:float)

Question

案例: 我想要一个“主菜单 div”。所有这些都需要左侧的 Logo 和右侧的水平导航栏。

.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;，导航栏位于右上角。但我希望它位于右下角，与 Logo 的底部对齐。

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

谢谢

Answer 1

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

.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>