Html 页面右侧的DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19606889/
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
DIV to the right side of the page
提问by Youri
I'm having a problem with placing the 'navigation' div (within 5 buttons) to the right side of the page in the '#header' div. The 'navigation' div is still next to the 'logo' div.
我在将“导航”div（在 5 个按钮内）放置在“#header”div 中的页面右侧时遇到问题。'navigation' div 仍然在 'logo' div 旁边。
Can someone help me to get it to the right side of the page?
有人可以帮我把它放到页面的右侧吗？
CSS code:
CSS代码：
body {
background-color: #000000;
margin:0;
padding:0;
}
#header {
width: 100%;
height: 100px;
background-color: 222423;
margin-bottom: 5px
}
#logo {
float: left;
}
#navigation {
display: inline-block;
vertical-align: middle;
}
#content {
height: auto;
}
.knop {
margin-right: 7px;
margin-left: 20px;
vertical-align: middle
}
.plaatje {
position: fixed;
width: 628px;
height: 300px;
margin: -150px auto auto -319px;
top: 50%;
left: 50%;
text-align: center;
}
.DivHelper {
display: inline-block;
vertical-align: middle;
height:100%;
}
HTML code:
HTML代码：
<html>
<head>
<link typte="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="header">
<div id="logo">
<img src="images/logo.png" width="90px">
</div>
<div id="navigation">
<img class="knop" src="images/buttonhome.png">
<img class="knop" src="images/buttonoverons.png">
<img class="knop" src="images/buttonproduct.png">
<img class="knop" src="images/buttonmedia.png">
<img class="knop" src="images/buttoncontact.png">
</div>
<div class="DivHelper"></div>
</div>
<img class="plaatje" src="images/headimage.png" >
fkfddkfd
</div>
<div id="footer">
</div>
</body>
</html>
回答by w3re
There are multiple approaches to this, and you might have to experiment what works for you.
有多种方法可以解决此问题，您可能需要尝试适合您的方法。
First of all, there's the position property, if you wanted to place the navigation to the right you'd get:
首先，有 position 属性，如果你想把导航放在右边，你会得到：
#navigation
{
position: absolute; /*or fixed*/
right: 0px;
}
This approach is very situational and might break. In some cases even breaking the entire lay-out. Best practices dictate to use this one as little as possible, but sometimes there's no other choice.
这种方法是非常情景化的，可能会失败。在某些情况下，甚至会破坏整个布局。最佳实践要求尽可能少地使用此方法，但有时别无选择。
The other way, which may or may not work, again, is to use the float property
另一种可能有效也可能无效的方法是使用 float 属性
#navigation
{
float: right;
}
回答by prakashapkota
Do like this (use float & dont forget the clear in content div) :
这样做（使用 float 并且不要忘记内容 div 中的 clear）：
#navigation {
display: inline-block;
vertical-align: middle;
float: right;
}
#content {
clear:both;
height: auto;
}
回答by Praveen Govind
You need to use float in navigation div and some width.
您需要在导航 div 和一些宽度中使用浮动。
#navigation {
display: inline-block;
vertical-align: middle;
float:right;
}
Update this class and check it should work
更新这个类并检查它应该工作
回答by Karuppiah RK
#navigation {
display: inline-block;
vertical-align: middle;
float: right;
padding-right: 50px;
padding-top: 50px;
}
adjust padding right and top px if u want....
如果您愿意，请调整右侧和顶部 px 的填充...
回答by Aaron Carpenter
Youri,
你的，
There are a few ways to accomplish this effect, here is one.
有几种方法可以实现这种效果，这里是一种。
Take a look at this:http://jsfiddle.net/legendarylion/8jKUP/1/
看看这个：http: //jsfiddle.net/legendarylion/8jKUP/1/
THE HTML
<body>
<div id="header">
<div id="logo">
<!--You may wish to eliminate the "width" property here and use the css to style the image... also, I'm assuming you're going to want to wrap this image in an anchor tag that points back to index.html (or default.html, whatever your homepage is...-->
<img class="example-logo" src="images/logo.png" width="90px">
</div>
<!--Your image code in your original source did not have anchor tags. If you want those to function as a nav, you might as well mark it up like I have it below, wrapping the image inside of a 'nav' element, ul, li, and anchor tag. Also see the CSS comments for ideas on sprite images and sticky menus-->
<nav>
<ul>
<li><a href="#"><!--add your image code back here-->Home</a>
</li>
<li><a href="#"><!--add your image code back here-->Overons</a>
</li>
<li><a href="#"><!--add your image code back here-->Product</a>
</li>
<li><a href="#"><!--add your image code back here-->Media</a>
</li>
<li><a href="#"><!--add your image code back here-->Contact</a>
</li>
</ul>
</nav>
</div>
<div class="DivHelper"></div>
</div>
<div id="footer"></div>
</body>
</html>
THE CSS
/* Make the header relative so we that the 'asbolute' positioning uses it as a reference, also, let's give that header an outline so we can see what we're doing */
#header {
position:relative;
border:1px dashed green;
}
/* Make the nav position asboslute to place it to the right */
nav {
position:absolute;
top:0px;
right:0px;
border:1px dashed blue;
}
/*So what happened? The parent element "header" is referenced by "nav" and "nav" is positioned absolutely relative to that parent in the top right hand corner. Nav will stay there even if the parent container has more elements added to it.
Also, it's worth asking I think... Did you want the menu static, or fixed as the page scrolls? That might be worth looking into as well. Look to the trusty W3C to help you out there: http://www.w3.org/Style/Examples/007/menus.en.html*/
/* Style the Nav (You can add your images right back into the html if you prefer, though you may want to look up how to make a sprite image with the css background property and positioning so they load as one file call, but hey, first thing is first right? */
nav ul li {
list-style-type:none;
display:inline-block;
margin:0 10px;
}
nav ul li a {
text-decoration:none;
}
.example-logo {
height:50px;
width:50px;
background:blue;
}
What we're doing here is declaring a parent element relative, and the element you want styled in the top right corner absolute to that relation.
我们在这里所做的是声明一个相对的父元素，并且您希望在右上角设置样式的元素绝对是该关系。
Also take a look in my comments in that code for some other ideas that I think might be helpful to you.
另请查看我对该代码的评论，了解我认为可能对您有帮助的其他一些想法。
回答by u7786739
I used margin-leftproperty like this:
我使用了这样的margin-left属性：
#navigation {
display: inline-block;
vertical-align: middle;
margin-left: 70%;
}
The margin-leftwill create space out side of element. You can get the left side of element with enough space, then your element will be the right side of the page.
该margin-left会创造出元件的侧面空间。您可以获得具有足够空间的元素左侧，然后您的元素将成为页面的右侧。
Reference: https://www.w3schools.com/css/css_margin.asp
