html - 如何使两个div彼此保持固定宽度并居中？

Question

请立即查看此 jsfiddle 以了解我的意思:http://jsfiddle.net/w7yayb5e/

基本上，在这个模型中，我有一个在 css 中设置样式的圆形和矩形，并且绝对定位在应该为 100% height 的背景上(无法在 jsfiddle 中使用)。

HTML:

<section class="background">
    <div class="circle"></div>
    <div class ="rectangle"></div>
</section>

CSS:

.background {
    background: #666;
    height: 275px;
    width: 100%;
}

.circle {
    display: block;
    height: 100px;
    width: 100px;
    background: red;
    position: absolute;
    left: 20%;
    top: 20%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid #fafafa;
    margin: 0 auto 40px;
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15)
}

.rectangle {
    display: block;
    height: 50px;
    width: 200px;
    background: blue;
    position: absolute;
    right: 20%;
    top: 26.5%;
}

现在问题来了:当我水平拉伸(stretch)窗口时，这两个对象相互滑动，很快就会达到在真实页面上看起来很奇怪的程度。相反的情况，即窗口变小，两个对象相互滑入，响应地处理，完全改变该屏幕尺寸的布局。

我希望这两个对象彼此保持固定宽度，同时在页面上居中。

我知道如果不改变绝对定位这可能是不可能的，即使我想保留垂直定位我想我会接受此时的任何解决方案并放弃 100% 高度设计。我仔细研究了大约 10 个不同的问题，这些问题似乎与这里的同一件事有关，但没有一个答案对我有用。

Answer 1

我会将两个形状都包装到一个容器中，因为这些形状具有固定大小，所以很容易计算出该容器的高度和宽度(在您的示例中为 344x104)。

然后您只需使用以下方法将容器定位在背景的中心:

    top:0;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
    position:absolute; 

而且形状不需要绝对位置，只需要一个 float 就可以使它们保持在同一直线上。

希望这已经足够清楚了。这里有一个 FIDDLE .检查一下

编辑:顺便说一句，要使 height:100% 有效，您需要将 height:100% 添加到所有父元素