4


当我想在居中的父 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 向左/向右移动,而不是留在中心?以及如何使它保持在中心?

4

3 回答 3

6

查看演示

#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;
}
于 2012-10-10T13:47:03.877 回答
3

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

margin:0 auto;
width:980px;

对于孩子,您可以使用此代码进行浮动

float:right or left;
width:anypx;

最好的祝福

于 2012-10-10T13:44:59.227 回答
1

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

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

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

一个工作的 JSFiddle(点击我)

于 2012-10-10T13:44:57.867 回答