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

How to make a div to float left/right inside a centered div

提问by phpsherpa

when i want to float a child div to left or right inside the centered parent div, the whole design goes left or right, depending on the float. So, how to float a child div and make the centered parent div in the center.

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

HTML:

HTML：

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

CSS:

CSS：

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

Why does parent div go left/right, and doesn't stay in center? And how to make it to stay in center?

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

回答by Champ

See the 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;
}

回答by Saeed

For parent div you use this css code

对于父 div，您使用此 css 代码

margin:0 auto;
width:980px;

and for child u use this code for float

对于孩子，您使用此代码进行浮动

float:right or left;
width:anypx;

best regards

此致

回答by Andy

To center the parent element, use margin: 0 auto;

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

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

There are also lots of spelling mistakes in your code (chile not child), and missing >symbols, fix them before you continue

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

A working JSFiddle (Click me)

一个有效的 JSFiddle（点击我）