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，其宽度与div相同＃right和set 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，这只是不确定容器所需的内部div）来居中。或可变宽度）。你知道你的容器是960px，你的内部是400px，因此居中它将在任何一侧有280px。

然后浮动：离开内部和右侧div。您也可以通过设置右侧的边距来改变内部和右侧之间的装订线宽度。

尝试此操作（在Firefox中验证）（当然，您需要div中的内容或其高度设置才能查看结果）：

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

中心DIV，一边有额外内容

3 个答案: