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

【问题标题】：Aligning the bottoms of an img (float:left) and a nav (right:float)对齐 img (float:left) 和 nav (right:float) 的底部
【发布时间】：2015-12-17 22:53:27
【问题描述】：

案例：我想要一个“主菜单 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>

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

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

谢谢

【问题讨论】：

标签： html css alignment css-float

【解决方案1】：

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

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

【讨论】：

谢谢。这是我正在寻找的确切答案。
这实际上是错误的，链接正在换行

【解决方案2】：

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

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

【讨论】：

感谢您的思考，但此解决方案仅在视口固定时才有效。如果您使用 px 值的相对位置调整浏览器等的大小，将使导航栏超出包含的 div。