0

我的 css 出现了一些问题，我的 2 个 div 正在互相控制。我希望他们两个挨着。

我有一个带有用户菜单和内容 div 的主体。

HTML：

<div id="body">
            <div id="user-menu">
                @if (Request.IsAuthenticated)
                { 
                    <ul id="account-menu">
                        <li>@Html.ActionLink("My profile", "MyProfile", "Profile")</li>
                        <li>@Html.ActionLink("Links", "Links", "Profile")</li>
                        <li>@Html.ActionLink("History", "History", "Profile")</li>
                        <li>@Html.ActionLink("Credits", "Credits", "Profile")</li>
                        <li>@Html.ActionLink("Settings", "Manage", "Account")</li>
                    </ul>  
                }
            </div>
            <div id="content">
                @RenderBody()
            </div>
        </div>
        <div id="footer">
            <p>&copy; @DateTime.Now.Year - Immo QR by eNetricity.com</p>
        </div>
    </div>

CSS：

#body 
{

margin: 0 auto;
max-width: 960px;

}

#user-menu 
{
float: left;
width: 15%;

}

#content 
{
float: right;
width: 85%;

}

图片：

问候

4

3 回答 3

0

Mathias，您不必要地关闭了一个 div，请删除它。也给两个div留下浮动。

于 2013-09-04T15:23:43.103 回答
0

想到两件事应该有助于解决问题：

  1. 由于右浮动<div>出现在左浮动之后，<div>它可能在浮动之前移动到下一行。尝试将两个元素都向左浮动。
  2. 有时浏览器在计算尺寸时会四舍五入到最接近的像素。您的代码在 10/90 拆分时效果更好吗？20/80？如果您的完整容器为 960 像素，请尝试以像素为单位手动计算列大小。
于 2013-09-04T15:24:25.193 回答
-1

尝试在两个浮动元素上设置边框：0，因为除非您通过重置或规范化重置您的 CSS，否则它们将继承名义边框：

#body 
{
margin: 0 auto;
max-width: 960px;
}

#user-menu 
{
float: left;
width: 15%;
}

#content 
{
float: right;
width: 85%;
}

#content, #user-menu{

边框：0；}

#footer{
  clear: both;

}

这是一个codepen：1：

高温高压

于 2013-09-04T15:18:43.400 回答