Question

我在包装器div中有两个子div（内联块）。我想让左边的Div居中，而右边的Div则放在左边的右边。

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

问题是，如果我使用 margin-left 来重新定位整个包装器，则左元素不会以小屏幕尺寸为中心。

如果我居中 leftElement1 并使用位置：绝对来定位 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

Answer 2

我不确定我是否完全理解你的意思，但我认为这样的事情对你有用。
- 您最好切换到％，因为它会在移动设备上运行得更好。
- 第二件事是为＃leftElement1添加margin:0 auto;所以它保持在中间。＃rightElement2将在右侧坚持，因为它是内联块。
现在，您可以向包装器添加任何边距，并保持不变。

小提琴http://jsfiddle.net/stassel/vzx6fm55/

HTML：

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

CSS：

#Wrapper1 {
 width: 90%;
 background-color: red;
 margin: 0 auto;
 white-space: nowrap;
 padding: 10px;
 margin-left:10%;}

#rightElement1 {
 background-color: blue;
 width: 10%;
 display: inline-block;
 height: 50px;}

#leftElement1 {
 background-color: green;
 width: 60%;
 margin:0 auto;
 display: inline-block;}

div {
 height: 100px;
 text-align: center;
 color: white;}

Answer 3

<强>解决

感谢您的所有答案！不幸的是，我无法正确描述我的问题，因此没有一个解决方案有效。

最后我能够自己解决问题。解决方案的关键是另一个居中的外包装，具有固定大小的待中心元素和溢出：可见。内部内容现在与外部包装器重叠。

#outerWrapper {
  width: 700px;
  overflow: visible;
  margin: 0 auto;
}

#Wrapper {
  width: 810px;
  background-color: red;
}

http://jsfiddle.net/aaq810gs/9/

将div右移到已经居中的内容而没有绝对位置

3 个答案: