Question

我有一个氛围，我有一个940像素宽的盒子，最多4个子节点140px，它们之间有20像素，浮在一条线上。当有1,2,3或4个子div时，我希望CSS强制子div组成为中心。目前，当第4个被移除时，前3个的位置不会改变。

我正在使用LESS。

我的代码：

#parent
{
    position: relative;
    width: 940px;
    clear: both;
    background-image: url(../images/bg.png);
    background-repeat: repeat-x;
    height: 100px;
    margin: 0 auto;
    margin-top: 2px;
}

#parent h1
{
    position: absolute;
    color: white;
    font-size: 36px;
    font-weight: 400;
    margin: 0;
    padding: 0;
    left: 5px;
    top: -24px;
}

#children
{
    position: relative;
    margin: 0 auto;
    margin-top: 35px;
}

.child
{
    width: 140px;
    padding-right:20px;
    float: left;
    text-align: center;   
}

#children:last-child
{
    padding-right: 0px;
    clear: right;
}

编辑：和HTML ......

<div id="parent">

    <h1>Lorem Ipsum</h1>

    <div id="children">

        <div class="child" id="1"></div>
        <div class="child" id="2"></div>
        <div class="child" id="3"></div>
        <div class="child" id="4"></div>

     </div>

 </div>

此外，＃childrenren：last-child似乎什么也没做。我是否正确地将其规则应用于＃4？

Answer 1

只需将div #children的宽度设置为100％并将text-align：center设置为，所以它的CSS就是这样：

#children
{
    position: relative;
    margin: 0 auto;
    margin-top: 35px;
    width: 100%;
    text-align: center;
}

并且对于children元素，您必须删除float属性并为它们提供相对位置：

.child
{
    width: 140px;
    padding-right:20px;
    text-align: center;   
    position: relative;
}

它应该有效。此外，如果你通过它的id清楚地指定最后一个子选择器，它是首选：last-child不能在IE7或IE6上工作：

#4.child{
    padding-right: 0px;
    clear: right;
}

我认为你不应该以数字开头任何id，id =“1”| id =“2”等。语法不正确。

Answer 2

这是一个有效的jsfiddle：

http://jsfiddle.net/emYfz/

#children {
  width: 100%;
  text-align: center    
}

.child {
 display: inline-block;
 width: 140px;
 height: 20px;
 margin: 5px;
 background: #f00;
}

当孩子的数量可能不同时，以div的孩子为中心

2 个答案: