居中的 DIV，一侧有额外内容

Question

我有一个在容器 div 中水平居中的内部 div，我需要在该容器中添加另一个 div，在居中 div 的右侧？如何在不干扰居中 div 的位置的情况下这样做（即它仍应居中在容器中，而不是在容器的左边缘和另一个 div 的左边缘之间？

<div id="container">
    <div id="inner"></div>
    <div id="right"></div>
</div>

div#container {
    width: 960px;
}
div#inner {
    width: 400px;
    margin: 0 auto;
}
div#right {
    width: 100px;
    float: right;
    /* what else? */
}

理想情况下，我什至想将 div#right 的位置指定为距 div#inner 右边缘的距离，而不是使用 float:right。

（到目前为止我想到的唯一解决方案是在左侧添加另一个与 div#right 宽度相同的 div 并设置为 visible:none。有没有更好的方法？）

Answer 1

我会尝试在父 <div> 中进行绝对定位：

div#container
{
  width: 960px;
  position: relative;
}

div#inner
{
  width: 400px;
  margin: 0px auto;
}

div#right
{
  position: absolute;
  width: 100px;
  right: 0px;
  top: 0px;
}

不保证这是否会开箱即用，但我会尝试这样的事情。

Answer 2

为它们添加一个额外的包装器并将其用于相对定位。

<div id="container">
  <div id="center">
    <div id="inner">Some</div>
    <div id="right">content</div>
  </div>
</div>

然后使用新的居中作为相对定位并“挂”右边的那个。使用否定的margin-right 将其移到外面。

div#container {
    width: 960px;
    background: red;
}
div#center {
    width: 400px;
    margin: 0 auto;
    position: relative;
}
div#inner {
    background: blue;
}
div#right {
    width: 100px;
    background: pink;
    position: absolute;
    right: 0;
    top: 0;
    margin-right: -100px;
}

Answer 3

因为您明确设置了容器和内部 div 的宽度，所以您可以通过将内部 div 的左边距设置为精确的像素长度来居中（而不是使用 margin: auto，这仅适用于不确定的容器或可变宽度）。你知道你的容器是 960 像素，而你的内部是 400 像素，所以居中它的两边各有 280 像素。

然后浮动：左侧和右侧 div。您也可以通过设置右侧的 margin-left 来改变内部和右侧之间的装订线宽度。

试试这个（在 Firefox 中验证）（当然，您需要设置 div 中的内容或设置它们的高度才能看到结果）：

div#container {
width: 960px;
}
div#inner {
width: 400px;
margin-left: 280px;
float: left;
}
div#right {
width: 100px;
float: left;
}