[英]Place <div>-Container on the right side of a margin:auto centered <div>
I want to position a div on the right side of a other div which is centered via margin:auto.我想在另一个通过 margin:auto 居中的 div 的右侧放置一个 div。 (Like a sidebar)
(就像一个侧边栏)
Simple HTML:简单的 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>
I have tried the solution from this question but it does not work in my fiddle.我已经尝试过这个问题的解决方案,但它在我的小提琴中不起作用。 The second div is in the next line.
第二个 div 在下一行。 Link: positioning elements left and right of a div with margin:auto
链接: 使用 margin:auto 在 div 的左侧和右侧定位元素
How to solve this?如何解决这个问题?
You can use positioning to create this effect:您可以使用定位来创建此效果:
#c1{
background-color:#CCCCCC;
width:300px;
margin:auto;
position:relative;
}
#c2{
background-color:#BBBBBB;
width:100px;
position:absolute;
right:-100px;
top:0;
}
And then you need to rearrange the HTML to look like this:然后你需要重新排列 HTML 看起来像这样:
<div id="c1">
con1
<div id="c2">con2</div>
</div>
Using position
property and a little moderation in your DOM you can easily achieve this.在你的DOM 中使用
position
属性和一点节制,你可以很容易地实现这一点。
Here's the Code :这是代码:
.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>
It will do the trick for you.它会为你做的伎俩。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.