Html 并排以CSS为中心的div

我的页面有以下部分。
风格：

和示例HTML：

<div class="featuredcontainer">
content
</div>
<div class="lessonnavcontainer">
menu
</div>

内容
菜单

当页面显示时。navcontainer位于（应该的）右侧，但位于featuredcontainer下方。当我使用相对定位向上移动navcontainer时，它看起来是正确的，但是页面底部有一堆空白。我该怎么办

使用float属性。通过使用float，css可以将div水平放置在彼此相邻的位置

.featuredcontainer {

width: 450px;
height: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 160px;
top: 30px;
border: 1px groove grey;
float: left;
}



.navcontainer
{
margin-left: auto;
margin-right: -8px;
position: relative;
top: 75px;
height: 600px;
width: 300px;
float: left;
}

---

这是一个起点，尝试使用float left或float right，看看会发生什么。摆弄它，直到它看起来像你想要的那样。

要让它们并排出现，你需要在CSS中添加float属性。要使它们根据页面宽度调整大小，您需要向它们添加相对宽度。要使它们在页面上居中（水平），需要将div放在html中相对定位的div中。这是一把小提琴

将nav和特色容器放入另一个包装器div中

HTML

<div class='wrapper'>
    <div class="navcontainer">
        menu
    </div>
    <div class="featuredcontainer">
        content
    </div>
</div>

---

jshiddle

用一个“包装器”div围绕两个div，如下所示：

<div id="wrapper">
    <div class="featuredcontainer">content</div>
    <div class="lessonnavcontainer">menu</div>
</div>

然后，要使两个div并排，请添加一个float：

.featuredcontainer { float: left; }
.lessonavcontainer { float: left; }

为了使定心工作，您需要在包装上声明一个宽度：

#wrapper { margin: 0px auto; }

#wrapper { width: 800px; }

---

确保在任何浮动对象上引入clearfix（）；然后使用

margin:0 auto

将它们的包含块元素居中，尝试将“float:left”添加到两个类现在它们彼此相邻，但不会随着页面大小的变化而移动，并且位置混乱。删除所有“top”和“right”并将这两个div放入父div#parent{width:750px；margin:0px auto 0px auto；}谢谢但是，当我应用它时，它们不会随着页面的大小而移动。谢谢。这是我的页面。请注意，右侧的菜单粘贴在屏幕的右侧？我需要保留它，然后把它移到featuredcontainer所在的位置，float会打破它。我对你想要的最终产品的外观感到困惑。你想让什么看起来不一样？谢谢。这是我的页面。请注意，右侧的菜单粘贴在屏幕的右侧？我需要保留它，然后把它移到featuredcontainer所在的位置。如果我使用定位向上移动它，它会在页面底部留下一堆空白。谢谢。这是我的页面。请注意，右侧的菜单粘贴在屏幕的右侧？我需要保留它，然后把它移到featuredcontainer所在的位置。如果我使用定位向上移动它，它会在页面底部留下一堆空白。谢谢。这是我的页面。请注意，右侧的菜单粘贴在屏幕的右侧？我需要保留它，并使用float来打破它。@Jaxkr您需要右菜单来保持在屏幕的右侧或包含包装器div的右侧？使用包装器div会打破粘在页面右侧的菜单。

.featuredcontainer { float: left; }
.lessonavcontainer { float: left; }

#wrapper { width: 800px; }