地方<div> -边距右侧的容器：自动居中<div>

Question

我想在另一个通过 margin:auto 居中的 div 的右侧放置一个 div。 （就像一个侧边栏）

简单的 HTML：

 #c1{ background-color:#CCCCCC; width:300px; margin:auto; } #c2{ background-color:#BBBBBB; width:100px; }

 <div id="c1">con1</div> <div id="c2">con2</div>

我已经尝试过这个问题的解决方案，但它在我的小提琴中不起作用。 第二个 div 在下一行。 链接： 使用 margin:auto 在 div 的左侧和右侧定位元素

如何解决这个问题？

Answer 1

您可以使用定位来创建此效果：

#c1{
    background-color:#CCCCCC;
    width:300px;
    margin:auto;
    position:relative;
}

#c2{
    background-color:#BBBBBB;
    width:100px;
    position:absolute;
    right:-100px;
    top:0;
}

然后你需要重新排列 HTML 看起来像这样：

<div id="c1">
    con1
    <div id="c2">con2</div>
</div>

Answer 2

HTML：

<div id="c1">
    con1
    <div id="c2">con2</div>
</div>

CSS：

#c1 {
    background-color:#CCCCCC;
    width:300px;
    margin:auto;
    position: relative;
}

#c2 {
    background-color:#BBBBBB;
    width:100px;
    position: absolute;
    right: -100px;
    top: 0px;
}

这是JSFiddle

Answer 3

在你的DOM 中使用position属性和一点节制，你可以很容易地实现这一点。

这是代码：

 .wrapper { position: relative; width: 100%; padding:0; margin:0; } #c1 { background-color:#CCCCCC; width:300px; margin:auto; height:100px; position: absolute; left:0; right:0; top:0; } #c2 { background-color:#294596; width:100px; height:100px; position: absolute; left:0; top:0; }

 <div class="wrapper"> <div id="c1">con1</div> <div id="c2">con2</div> </div>

它会为你做的伎俩。