css:如何在左侧以最小间距构建居中的div

Question

所以过去几天我试图实现以下目标:

想法是让一个 div(红色)最终居中(使用 margin:auto;)，并在同一水平(x 轴)上放置另一个具有固定大小(蓝色)的 div。

在足够大的显示器上，最大化后，它看起来很棒。现在有趣的部分是当屏幕变小和/或调整窗口大小时。由于自动边距，其中一个 div 与另一个重叠:

这就是我要防止的。 (解释:红色是菜单，蓝色是标志)

所以第一个想法是将红色 div 向右移动蓝色 div 所需的像素，使用 padding-left:??px;

但这使得红色 div 不再绝对居中，而是向右填充了 ??px。象征性地居中于一个额外的框(灰色)中。

第二个想法是在红色 div 的右侧创建另一个(透明的)div。但这会使整个站点的最小宽度超出范围:

换句话说:滚动条很早就可见了。它应该在窗口小于红色和蓝色 div 的像素总和时出现。而不是像 img 4 那样，当窗口小于红色 div 和两个 div 的像素总和时它就会出现)。

所以我想要的是:两个 div，不重叠(即使在调整大小时也是如此)，右边一个固定大小，左边一个在窗口中央，没有创建 ghost div，在低分辨率下创建空白。哦，如果可能的话，请不要使用 javascript。

我希望我的解释对我的想法有所帮助。此外，我希望有人有好主意或有被忽视的功能可以帮助我。

Answer 1

我把它收回来了……这有点可能……有很多骇人听闻的编码……

http://jsfiddle.net/7myd4/2/

http://jsfiddle.net/7myd4/2/show

在那里你会找到代码和演示。它涉及一个包装器、填充、相对定位和一个非常骇人听闻的布局。 :P

---

编辑:

回顾两年多前的这个答案...我得出的结论是这个答案很糟糕。

我已经用代码示例和一个新的演示更新了它(唯一不同的是格式更改和将内联样式移动到类)

---

HTML

<div class="firstdiv"></div>
<div class="seconddiv">
    <div class="innerdiv"></div>
</div>

CSS

body{
  padding:10px 0px;
}

.firstdiv {
    background-color:#ddd;
    position:fixed;
    left:0px;
    width:200px;
    height:200px;
}

.seconddiv {
    margin:0 auto;
    width:300px;
    height:150px;
    padding-left:400px;
    position:relative;
    left:-200px;
}

.innerdiv {
    background-color:#ccc;
    width:300px;
    height:150px;
}

---

演示:http://jsfiddle.net/7myd4/55/show
来源:http://jsfiddle.net/7myd4/55/