Question

我在SO中发现了很多这个问题的变化，但似乎无论我尝试什么我都无法得到这个（看似非常简单！）的工作！

我要做的是将“居中” div 保持在视口的中心，并将“侧边栏” div 直接放在右侧（即不与视口右对齐）而不影响“居中” div 的居中。

这是关于jsfiddle的一些测试代码：

http://jsfiddle.net/6wCyr/13/

我读过的所有东西似乎暗示 float 属性正是我正在寻找的，但链接中的结果显示我得到了奇怪的结果，其中放置了右侧边栏< em>低于'居中' div 而非旁边。这就是链接中显示的内容。

我还看到了一个解决方案，涉及对右属性使用负值，并准确设置侧边栏的宽度，但我也无法使用。

希望这个问题像我认为的那样容易解决！似乎无法在 div 内找到正确的 div 等等。很难调试这些对齐问题！

谢谢！

Answer 1

Live Demo

我在div.sidebar内移动div.centered。
我将position: relative添加到div.centered。
我们正在使用this technique。
您无需在div.sidebar上声明固定宽度。

<强> CSS：

div.centered {
    margin-left: auto;
    margin-right: auto;
    border: dashed;
    width: 100px;
    height: 100px;
    position: relative
}

div.sidebar {
    border: dotted;
    position: absolute;
    top: 0;
    left: 100%
}

<强> HTML：

<div class="holder">
    <div class="centered">
        CENTERED
        <div class="sidebar">
            RIGHT SIDEBAR
        </div>
    </div>
</div>

Answer 2

试试这个。

http://jsfiddle.net/DOSBeats/6wCyr/16/

.holder {
    margin:0 auto;
    width:100px;
}

.centered {
    border: dashed;
    float:left;
    height: 100px;
}

.sidebar {
    border: dotted;
    float:left;
    margin-right:-100px;
    width:100px;
}

Answer 3

如果没有为支架设置宽度并使其居中，侧边栏将浮动到窗口边缘。

试试这个：

HTML：

<div id="holder">
<div id="sidebar">Sidebar</div>
<div id="centered">Centered</div>
</div>

CSS：

#holder{
  margin:auto;
  width:500px;
}
#sidebar{
  border:dotted;
  float:left;
  width:100px;
}
#centered{
  border:dashed;
  margin-left:110px;
  width:380px;
}

在中心div旁边放置div侧边栏

3 个答案: