CSS 同一行左侧的徽标和右侧的菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7622622/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
logo on left and menu on right in same row
提问by Ryan
I want to have in the same raw, in the left a logo, and in the right a menu like Contact Us. If I make 3 divs for this and I allign the first left, and the 3rd right, it doesn't work. How can you have this?
我想在同样的原始文件中，在左边有一个标志，在右边有一个像联系我们这样的菜单。如果我为此制作了 3 个 div，并将第一个左侧和第三个右侧对齐，则它不起作用。你怎么会有这个？
回答by Anson
Float would be a clean, simple way to do it. Try floating your logo div left, and your menu div right, like so:
Float 将是一种干净、简单的方法。尝试将徽标 div 向左浮动，将菜单 div 向右浮动，如下所示：
HTML:
HTML：
<div id="navbar">
<div id="logo">Logo</div>
<div id="navmenu">Nav menu</div>
</div>
CSS:
CSS：
div#logo {
float: left;
}
div#navmenu {
float: right;
}
回答by Jared Farrish
Without any actual markup to look at, the following is a very simple three-column setup. This is not meant as a three-column page layout, only three columns stretching across the top. Note the use of floatto send the DIV's to the same row, left to right*.
无需查看任何实际标记，以下是一个非常简单的三列设置。这并不是一个三列的页面布局，只有三列横跨顶部。请注意使用float将DIV's发送到同一行，从左到右*。
* You could set the last right. Also, you will have to clear as well for any content following the #menu-rowDIV(this is the overflow: autopart).
* 你可以设置最后的权利。此外，您还必须清除#menu-rowDIV（这是overflow: auto部分）之后的任何内容。
CSS
CSS
#menu-row {
overflow: auto;
}
#menu-logo {
width: 10%;
float: left;
}
#menu-logo img {
width: 100%;
}
#menu-content {
width: 80%;
background: #ddd;
float: left;
}
#menu-right {
width: 10%;
height: 1.3em;
background: #dfd;
float: left;
}
#menu-content li {
display: inline;
list-style-type: none;
height: 128px;
}
#page-content {
background: #ddf;
}
HTML
HTML
<div id="menu-row">
<div id="menu-logo">
<img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG"/>
</div>
<div id="menu-content">
<ul>
<li>Home</li>
<li>About</li>
<li>Stuff</li>
</ul>
</div>
<div id="menu-right"></div>
</div>
<div id="page-content">
<p>This is stuff.</p>
</div>
回答by jewetnit
I dont fully understand your question, but you might be able to fix it by positioning the divs absolute.
in the HTML: <div id="leftdiv"></div>in the CSS:
我不完全理解你的问题，但你可以通过定位绝对的 div 来解决它。在 HTML 中：<div id="leftdiv"></div>在 CSS 中：
#leftdiv{
width:10%;
height:100%;
position:absolute;
left:0%;
top:0%;
}
#rightdiv{
width:10%;
height:100%;
position:absolute;
right:0%;
top:0%;
}
#centerdiv{
width:80%;
height:100%;
position:absolute;
left:10%;
top:0%;
}
