css - 如何使 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

查看演示

#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;
}

您的代码中还有很多拼写错误（智利不是孩子），并且缺少>符号，请在继续之前修复它们

一个工作的 JSFiddle（点击我）