3

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

我想要做的是将'居中' div保持在视口的中心，并将'sidebar' div直接放置在其右侧（即不与视口右对齐）而不影响'的居中居中的div。

这是jsfiddle上的一些测试代码：

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

我读过的所有内容似乎都暗示float属性正是我正在寻找的，但链接中的结果显示我得到了奇怪的结果，其中右侧边栏位于“居中” div下方而不是它旁边。这就是链接中显示的内容。

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

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

谢谢！

4

3 回答 3

5

现场演示

  • 我搬进去div.sidebar了div.centered。
  • 我添加position: relative到div.centered.
  • 我们正在使用这种技术。
  • 您不必在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>
于 2011-03-01T20:03:02.923 回答
4

尝试这个。

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;
}
于 2011-03-01T20:02:49.647 回答
0

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

尝试这个：

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;
}
于 2011-03-01T20:04:59.190 回答