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

Please have a look at this jsfiddle right away to get a grasp on what I mean: http://jsfiddle.net/w7yayb5e/

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

Basically in this mockup I have a circle and rectangle styled in css and positioned absolutely on a background that is supposed to be 100% height (couldn't get that to work in jsfiddle).

基本上在这个模型中我有一个圆形和矩形在css中设置,绝对定位在一个应该是100%高度的背景上(无法在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%;
}

Now to the problem: as I stretch the window bigger horizontally, the two objects glide from each other, soon reaching the point where things would look weird on a real page. The reverse situation, where the window is made smaller and the two objects glide into each other, is dealt with responsively, changing the layout completely on that screen size.

现在问题是:当我将窗户拉得更大时,两个物体相互滑动,很快到达真实页面上看起来很奇怪的地方。反向处理窗口变小并且两个物体相互滑动的相反情况,在该屏幕尺寸上完全改变布局。

I would like the two objects to stay a fixed width from each other, while being centered together on the page.

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

I am aware that this might be impossible without changing the absolute positioning, and even though I would like to retain the vertical positioning I guess I will accept any solution at this point and scrap the 100% height design. I've pored through perhaps 10 different questions that seem to be about the same thing here, yet none of the answers worked for me.

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

3 个解决方案

#1

I would wrap both shapes into a container and since the shapes has fixed sizes it's easy to calculate the height and width of this container (in your example 344x104).

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

then you just have to position the container in the center of your background using:

然后你只需要使用以下方法将容器放在背景的中心:

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

and the shapes don't need an absolute position and just a float to keep them same line.

并且形状不需要绝对位置,只需要浮动以保持它们相同的线条。

Hope this is clear enough. here you have a FIDDLE. check it out

希望这很清楚。在这里你有一个FIDDLE。看看这个

Edited: btw, to make the height:100% works, you need to add height:100% to all parent elements

编辑:顺便说一句,要使高度:100%有效,你需要为所有父元素添加高度:100%

#2

Try this Fiddle

试试这个小提琴

CSS:

    body {
        background: none repeat scroll 0 0 #666;
        height: 95%;
    }

    .background {
        position: absolute;
        text-align: center;
        top: 30%;
        width: 90%;
    }

    .circle {
        background: none repeat scroll 0 0 red;
        border: 2px solid #fafafa;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
        display: inline-block;
        height: 100px;
        width: 100px;
    }

    .rectangle {
        background: none repeat scroll 0 0 blue;
        display: inline-block;
        height: 50px;
        width: 200px;
    }

#3

Use left: 50%; and margin-left to give a certain offset from the center. For example you want there to be 200 pixels between them.

使用左:50%;并且左边距离中心有一定的偏移量。例如,您希望它们之间有200像素。

.circle {
  width: 100px;
  position: absolute;
  left: 50%;
  margin-left: -200px; 
}

margin -200 comes from 100 for the width of the circle + 100, half of the 200px apart.

边距-200来自100的圆宽+ 100,相差200px的一半。

For the rectangle:

对于矩形:

.rectangle {
  width: 200px;
  position: absolute; 
  left: 50%;
  margin-left: 100px;
}

This will centre the gap between them. If you want to centre the total you should subtract the difference in width between the two objects divided by 2 (25px) from the margins.

这将使它们之间的差距居中。如果要使总数居中,则应减去两个对象之间的宽度差除以边距的2(25px)。