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

Question

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

我要做的是将"居中" div保持在视口的中心,并将"侧边栏" div直接放在右侧(即不与视口右对齐),而不会影响'中心" DIV.

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

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

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

我也看到了一个解决方案,涉及对正确的属性使用负值,并准确设置侧边栏的宽度,但我也无法得到那个.

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

谢谢!

Answer 1

现场演示

• 我搬到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>