将 DIV 定位在正确的位置答案

【问题标题】：Positioning the DIV at correct position将 DIV 定位在正确的位置
【发布时间】：2013-07-21 03:39:20
【问题描述】：

我是 CSS 新手，最近一直在尝试将 DIV 定位在我希望的位置，但是浮动和边距等一些属性让我感到困惑。在下图中，我试图将白色 div 放在徽标的右侧。

由于我还不能在帖子上发布图片，我上传了here

HTML：

<body>

<header>
    <div class="header">
        <div class="logo">
            <img src="images/logo.png" />
        </div>

        <nav>
            <div class="navigation">

            </div>
        </nav>
    </div>    

</header>

</body>

css：

.header {
    max-width:1200px;
    min-width:200px;
    height:170px;
    margin:0 auto;
    margin-top:10px;
    background-color:rgba(0, 0, 0, 0.5);
    border-radius:3px;

}

.logo {
    width:230px;
}

.logo img {
    margin-left:20px;
    margin-top:31px;
    border-right:solid  #FFF 1px;
    padding-right:33px;
    height:auto;
    width:auto;

}


.navigation {
    width:500px;
    height:100px;
    margin-left:200px;
    background-color:#FFF;
    position:fixed;


}

【问题讨论】：

标签： html css css-float margin

【解决方案1】：

将.navigation的position:fixed;更改为position:inline-block；并添加margin-top 使它们垂直排列，具体取决于每个高度

或者你可以float:left;他们两个

【讨论】：

【解决方案2】：

用你的CSS替换下面的.logo img和.navigation，这里是fiddle

.logo img {
    margin-left:20px;
    margin-top:31px;
    border-right:solid  #FFF 1px;
    padding-right:33px;
    height:auto;
    width:auto;
    float:left;
}


.navigation {
    width:500px;
    height:100px;
    margin-left:200px;
    margin-top:31px;
    background-color:#FFF;
    position:fixed;

}

将 float:left; 放在您的 .logo img {...} 类中
将 margin-top:31px; 放在 .navigation {...} 类中

【讨论】：