页面右侧的 DIV答案

【问题标题】：DIV to the right side of the page页面右侧的 DIV
【发布时间】：2018-07-13 11:33:34
【问题描述】：

我在将“导航”div（在 5 个按钮内）放置在“#header”div 中的页面右侧时遇到问题。 'navigation' div 仍然在 'logo' div 旁边。

谁能帮我把它放到页面的右侧？

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>

【问题讨论】：

让它float: right;

标签： html css

【解决方案1】：

有多种方法可以解决此问题，您可能需要尝试适合自己的方法。

首先，有 position 属性，如果你想把导航放在右边，你会得到：

#navigation
{
    position: absolute; /*or fixed*/
    right: 0px;
}

这种方法非常适合情境，可能会失败。在某些情况下，甚至会破坏整个布局。最佳实践要求尽可能少地使用这个，但有时别无选择。

另一种可能有效也可能无效的方法是使用 float 属性

#navigation
{
    float: right;
}

【讨论】：

必须移动到页面右侧的不是页眉，而是导航。我知道你的意思哈哈！我试图使用浮动选项，但是它会从页面的右侧到顶部...... :(
CSS 中的垂直对齐通常是一个棘手的问题，看看不同的属性如何交互并不时地覆盖彼此的行为，甚至可能从浏览器到浏览器等。我最好的选择是浮动不是直接与vertical-align兼容，您必须使用另一种方法将其与右侧对齐或使用另一种方法进行垂直对齐。
只是一点点，但0 没有任何单位。只是0 不是0px:)

【解决方案2】：

这样做（使用浮动并且不要忘记内容 div 中的清除）：

#navigation {
display: inline-block;
vertical-align: middle;
float: right;
}

#content {
clear:both;
height: auto;
}

【讨论】：

感谢用户@2191187。使用您提供的更新代码，导航栏正在移动到页面的右侧顶部:(

【解决方案3】：

#navigation {
display: inline-block;
vertical-align: middle;
float: right;
padding-right: 50px;
padding-top: 50px;
}

如果你愿意，可以调整右边距和顶部像素......

【讨论】：

谢谢印度人。问题是..我想在'header' div中间设置'navigation'和百分比...... :(你能帮我制作一个百分比代码吗？
#navigation { 显示：块；文本对齐：居中；填充顶部：50px； }

【解决方案4】：

您需要在导航 div 中使用浮动和一些宽度。

#navigation {
 display: inline-block;
 vertical-align: middle;
 float:right;
 }

更新这个类并检查它应该可以工作

【讨论】：

嗨，Praveen Reddy，我刚刚用你的代码更新了课程，但没有成功:(我已经截取了新代码后的页面截图。img6.imageshack.us/img6/433/02p4.png
你好，你好，从课堂上删除，我已经更新了。检查它//

【解决方案5】：

你，

有几种方法可以实现这种效果，这里有一个。

看看这个：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;
}

我们在这里所做的是声明一个相对的父元素，并且您希望在右上角设置样式的元素与该关系绝对。

还可以查看我在该代码中的 cmets，了解我认为可能对您有帮助的其他一些想法。

【讨论】：

【解决方案6】：

我像这样使用margin-left 属性：

#navigation {
display: inline-block;
vertical-align: middle;
margin-left: 70%;
}

margin-left 将在元素之外创建空间。您可以让元素的左侧有足够的空间，然后您的元素将是页面的右侧。

参考： https://www.w3schools.com/css/css_margin.asp

【讨论】：