如何使div在居中的div中向左/向右浮动

Question

当我想在居中的父div中向左或向右浮动子div时，整个设计会向左或向右移动，具体取决于浮动。那么，如何浮动子div，并使居中的父div居中。

HTML：

<div id="parent">
<div id="child-left"></div>
<div id="child-right"></div>
</div>

CSS：

#parent{
    padding: 0 auto;
    width: 600px;
}
#child-left{
    float: left;
    width: 300px;
}
#child-right{
    float: right;
    width: 300px;
}

为什么父div向左/向右，而不是居中？以及如何让它保持在中心位置？

Answer 1

请参阅demo

#parent{
    padding: 0px, auto;
    width: 605px;
  height:200px;
  border:solid 1px #f00;
}
#child-left{
  float: left;
  width: 300px;
  height:200px;
  border:solid 1px #0F0;
}
#child-right{
    float: right;
    width: 300px;
   height:200px;
  border:solid 1px #00F;
}

Answer 2

对于父div，您可以使用以下css代码

margin:0 auto;
width:980px;

对于孩子，使用下面的代码来表示浮点数

float:right or left;
width:anypx;

诚挚的问候

Answer 3

要使父元素居中，请使用margin: 0 auto;

#parent{
    margin: 0 auto;
    width: 600px;
}

你的代码中也有很多拼写错误(儿童不是儿童)，并且缺少>符号，请在继续之前纠正这些错误

A working JSFiddle (Click me)