Question

所以我要做的就是让一个以页面为中心的div（margin: auto auto;），在其左侧有一个导航div。

可以打开或关闭导航div的想法（因此可能存在也可能不存在）。如果它在那里不应该干扰主要div的居中。

以下是一个例子

Mockup Image

我尝试了一些事情

用主div包装两个div。将主div设置为margin: auto auto，然后将两个子div设置为float: left。问题是当导航器消失时，整个事物向左移动。
保持中间div margin: auto auto;向左浮动导航div，然后使用margin-left，但当页面变大或变小时，这会发生变化。

任何指针都会以最好的方式表达。我希望避免吃桌子。

JSFiddle link

Answer 1

试试这个：

在你的HTML中：

<body>
<div class="encasing">
    <div class="leftmenu"></div>
</div>
</body>

在你的css中：

html, body
{
  width: 100%;
  height: 100%;
}

div.encasing
{
  top: 50px;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  height: 500px;
  background-color: green;
  position: relative;
}

div.leftmenu
{
  right: 100%;
  width: 10%;
  height: 300px;
  background-color: red;
  position: absolute;
}

重要的部分是：

将包含菜单的块放在中心块
使中心区块有左边距：自动; margin-right：auto;
使中心区块具有相对定位
让菜单具有绝对定位
使菜单正确：100％

这里的想法是让左侧菜单使用中心块的位置，然后自行调整。右：100％将菜单的右边缘放在菜单的左边缘。

最后，css中一个非常好的技巧是绝对定位元素相对于最近的相对或绝对定位父元素进行自我调整。 :)

Answer 2

我能想到的一些解决方案：

使用导航div的绝对定位。你可能想给body元素一个min-width，以避免当窗口太小时导航div与主div重叠。
三栏布局，例如两个固定宽度的div向左和向右浮动，内容div在它们之间浮动。在左浮动div内，显示您的导航div（或不显示）。或者，在三列上尝试display: inline-block。不同之处在于如何处理小窗口（试一试）。同样，您可以通过在身体上设置最小宽度来对抗不需要的效果。
完全固定的布局。决定理想的屏幕分辨率，并对所有内容进行硬编码。通过这种方式，您可以将所有内容绝对定位到您想要的位置，但缺点是在与预期分辨率偏离太多的任何内容上都不会看起来很好。特别是移动设备将会看到破坏性的结果;您可以使用@media查询来解决这些问题，将您的布局调整为其他屏幕分辨率。

你还应该尝试找到一个能够做你想做的事情的网站，看看他们是怎么做的（检查HTML，CSS，也许是Javascript）。

CSS以div为中心，在另一个div的左侧

2 个答案: