0

私はこのhtml構造を持っています。

<div id="parent">
    <div class="child">
        <h1>title</h1>
        <p>content</p>
    </div>
    <div class="child">
        <h1>title</h1>
        <p>content</p>
    </div>
    <div class="child">
        <h1>title</h1>
        <p>content</p>
    </div>
</div>

そしてそれらの要素のcss。

#parent{
    padding: 0px 8px;
    overflow: auto;
    max-width: 100%;
    max-height: 100%;
}
.child{
    width: 300px;
    display: block;
}
.child:first-child{
    float: left;
}
.child:last-child{
    float: right;
}
.child:nth-child(2){
/* what is the style here to make it center? */
}

上記のコードからわかるように、目的は、最初の子要素が左にフロートし、最後の子要素が右にフロートし、2 番目の子要素がちょうど間にあるように、これらの子要素をきれいに整列させることです。これらの左右の子要素なので、達成しようとしているのは、親div内の等しいパターンに整列する3つのボックスです。これまでのところ、margin: 0 auto; を試しました。中間の子要素で動作しますが、残念ながら機能しないため、現在、目的の出力を達成するための正確なソリューションを探しています。

4

5 に答える 5

0

2 番目の div を左にフロートさせ、必要に応じてマージンを左に適用します。レスポンシブ テンプレートを作成しようとしている場合は、ピクセルの代わりに単に % を使用してください。それが理にかなっていることを願っています。

.child:first-child, .child:nth-child(2) {
    float:left;
}

.child:nth-child(2) {
    /* what is the style here to make it center? */
    margin-left: what ever pixels or %;
}

.child:last-child {
    float:right;
}

JSFIDDLE (レスポンシブ):

http://jsfiddle.net/83Gg2/

于 2013-07-04T01:34:43.657 に答える
0

要素を互いにフロートする必要はありません。必要なのは、要素を使用display: inline-block propertyすることです。ハックですが、よりクリーンなアプローチです。

#parent{                                                                        
     width: 100%; 
     height: 100%;                                                  
     max-width: 100%;
     max-height: 100%;                                          
     overflow: hidden;                                                           
}                                                                                
.child{                                                                         
     width: 33%;  // Since there are 3 childs.                                                               
     display: inline-block;                                                       
}

ここでのトリックとハックは、HTML コード内の子要素間のスペースにコメントを付ける必要があることです。これは、プロパティdisplay:inline-blockがそれらの間にスペースのない要素のみを整列させるためです。したがって、HTML コードは次のようになります。

<div id="parent">                                                               
     <div class="child">                                                         
         <h1>title</h1>                                                          
         <p>content</p>                                                          
     </div><!--                                                                  
     --><div class="child">                                                      
         <h1>title</h1>                                                          
         <p>content</p>                                                                               
     </div><!--                                                                  
     --><div class="child">                                                      
         <h1>title</h1>                                                          
         <p>content</p>                                                          
     </div>                                                                      
 </div>                                                                          
 ~

これは JsFiddle へのリンクですチェックしてください

~
~

于 2013-07-04T01:35:57.290 に答える
0

わかりました、jquery にもタグを付けるので、ここに JQ の方法があります。

固定幅を に設定せず#parent、固定幅を にしたい場合は.child、これを使用します。クロスブラウザーや古いブラウザーでも動作します。

デモhttp://jsfiddle.net/yeyene/VW9mw/

$(document).ready(function(){
    moveCenter();
    $(window).resize(function() {
        moveCenter();
    });
});
function moveCenter(){
    var mar = ($('#parent').width()-$('.child').width()*3)/2;    
    $('.child').eq(1).css({
        'margin-left': mar+'px',
        'margin-right':mar+'px'
    });
}
于 2013-07-04T02:19:36.693 に答える