1

940pxの幅のボックスがあり、140pxの子divが最大4つあり、その間に20pxが並んでいるシナリオがあります。1つ、2つ、3つ、または4つの子divがある場合、CSSで子divのグループを強制的に中央に配置する必要があります。現在、最初の3つの位置は、4番目を削除しても変更されません。

私は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>

また、＃children：last-childは何もしていないようです。そのルールが＃4に適用されるべきだと私は思いますか？

4

2 に答える 2

2

div #childrenの幅を100％に設定し、text-align：centerを設定するだけで、CSSは次のようになります。

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

子要素の場合、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"など。構文が正しくありません。

于 2012-09-08T00:37:37.217 に答える
1

これが機能しているjsfiddleです：

http://jsfiddle.net/emYfz/

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

.child {
 display: inline-block;
 width: 140px;
 height: 20px;
 margin: 5px;
 background: #f00;
}
于 2012-09-08T00:44:12.287 に答える