css - 将 div 定位到没有绝对位置的已经居中的内容

Question

我在包装器 div 中有两个子 div(内联 block )。我希望左侧的 Div 居中，右侧的仅位于左侧 div 的右侧。

<div id="Wrapper1"><div id="leftElement1">LEFT ELEMENT</div><div id="rightElement1">RIGHT</div></div>

问题是，如果我使用 ma​​rgin-left 重新定位整个包装器，左元素不会在小屏幕尺寸上居中。

如果我将 leftElement1 居中并使用 position: absolute 定位 rightElement1 Warpper Div 不会根据其子项调整其宽度和高度.

为了更好地理解检查 http://jsfiddle.net/aaq810gs/6/

感谢任何帮助!

Answer 1

如果我没理解错的话，你想要这样的东西:

#rightElement1 {
    background-color: blue;
    position: relative;
    width: 100px;
    display: inline-block;
    height: 50px;
    float: right;
    top: -100px;
}

应用于您的第一个示例。

fiddle

或者像这样:

#rightElement1 {
    background-color: blue;
    position: fixed;
    width: 100px;
    display: inline-block;
}

fiddle