Question

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

想法是让div（红色）最终居中（使用margin：auto;），并在同一级别（x轴）另一个具有固定大小（蓝色）的div。

在足够大的显示屏上，最大化，看起来很棒。现在有趣的部分是当有一个较小的屏幕和/或调整窗口大小。由于自动保证金，其中一个div与另一个重叠：

这是我想要防止的。（在解释中：红色是菜单，蓝色是徽标）

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

但这使得红色div不再是绝对居中，而是填充?? px到右边。形象地集中在一个额外的盒子里（灰色）。

第二个想法是在红色div的右边创建另一个（透明）div。但这会使整个网站的最小宽度变得不受约束：

换句话说，滚动条很早就可以看到了。当窗口小于红色和蓝色div的像素总和时，它应该出现。而不是像img 4那样，当窗口小于红色div的像素和两者 div的左右两边的像素之和时出现的情况。

所以我想要的是：两个div，不重叠（即使调整大小），右边一个固定大小，左边一个在窗口中心，不创建鬼格，在低分辨率上创建空白区域。哦，如果可能的话请不要使用javascript。

我希望我的解释有助于我的想法。我还希望有一个好主意或有一个被忽视的功能的人可以帮助我。

Answer 1

我把它拿回来...这是可能的......有很多hackish编码...

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

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

在那里你会找到代码和演示。它涉及包装，填充，相对定位和真正的hackish布局。：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/

Answer 2

使用Javascript根据窗口宽度更改div的宽度。或者使用css堆栈来检查屏幕的最大宽度，并获得该大小的css。

http://api.jquery.com/width/

http://api.jquery.com/resize/

或查看此堆栈。

How to dynamically change image/div dimensions based on window size?

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

2 个答案:

编辑：

HTML

CSS