地方<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>

它會為你做的伎倆。