CSS:如何实现 - 两个元素要居中并排放在没有第三个父容器的情况下?

Sha*_*nov 2 html css frontend center

问题:在以下HTML标记中:

<html>
  <body>
    <div id="div_1"></div>
    <div id="div_2"></div>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

我希望两者div(可以是任何其他标签)居中并排放在一起.如何使用CSS实现这一点,而无需添加第三个父容器?

Sha*_*nov 5

在这里演示:http://jsfiddle.net/Shehi/6RqWb/

遵循CSS规则解决问题:

#div_1
{
    width: 200px;
    height: 200px;
    background-color: red;
    position: relative;
    left: 50%;
    margin-left: -200px; /* = -1 * the width of element */
    float: left;
    clear: none;
}

#div_2
{
    width: 200px;
    height: 200px;
    background-color: blue;
    position: relative;
    right: 50%;
    margin-right: -200px; /* = -1 * the width of element */
    float: right;
    clear: none;
}
Run Code Online (Sandbox Code Playgroud)