页面右侧的DIV [英] DIV to the right side of the page
问题描述
我在将导航" div(5个按钮内)放置在"#header" div中页面的右侧时遇到问题.导航" div仍然位于徽标" div旁边.
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.
有人可以帮助我将其显示在页面右侧吗?
Can someone help me to get it to the right side of the page?
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代码:
<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>
推荐答案
有多种解决方法，您可能必须尝试一些适合自己的方法.
There are multiple approaches to this, and you might have to experiment what works for you.
首先，有position属性，如果您想将导航放置在您将获得的右侧:
First of all, there's the position property, if you wanted to place the navigation to the right you'd get:
#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.
另一种可能有效或无效的方法是使用float属性
The other way, which may or may not work, again, is to use the float property
#navigation
{
float: right;
}
这篇关于页面右侧的DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
