如何使div在中心div内左/右浮动

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:

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

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

为什么父母div左/右,不留在中心?以及如何让它留在中心?

3 个解决方案

#1

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

#2

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

#3

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(点击我)

#1