CSS动态地将div放在中心元素旁边

Question

我有一个设计问题.我在页面上有一个居中的徽标,我想要的是一个以页面左侧和徽标左侧为中心的div.

我怎么能只用css实现这个目的？

这是一个例子:

Answer 1

看看这个演示...

http://jsfiddle.net/UnsungHero97/7Z5fu/

超文本标记语言

<div id="wrapper">
    <div id="box-left">
        <div id="left"></div>
    </div>
    <div id="box-center">
        <div id="center"></div>
    </div>
</div>

CSS

html, body {
    margin: 0 !important;
    padding: 0 !important;
}

#wrapper {
    width: 100%;
}

#box-center, #box-left {
    width: 50%;
    float: left;
}

#left {
    border: 1px solid magenta;
    height: 50px;
    width: 50px;
    position: relative;
    left: 50%;

    /* half of width of #left + half of margin-left of #center */
    margin-left: -75px; /* 50/2 + 100/2 = 25 + 50 = 75 */
}

#center {
    border: 1px solid magenta;
    height: 50px;
    width: 200px;
    margin-left: -100px;
}

我希望这有帮助。