Question

我想在另一个div的右侧放置一个div，它以margin：auto为中心。（像边栏一样）

简单的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在下一行。链接： positioning elements left and right of a div with margin:auto

如何解决这个问题？

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>

它会为你做到这一点。

将<div> -Container放在边距的右侧：自动居中<div>

3 个答案: