3

私はちょっと頭を包むことができず、公式化するのが難しいので、ウェブ/ここで適切な解決策を見つけるのも難しい.

基本的に私が欲しいのは、画像を左揃えにした中央揃えのようなものです。したがって、中央に配置された動的な幅の親 div (幅はブラウザーの幅によって異なります) である必要があります。これは、行に表示される画像を含む div を保持しますが、新しい行は左揃えにする必要があります。

Isotopeでその目標を達成するのに何の問題もありません。中央の石積みは、まさに私が望む動作を示しています。ブラウザーのサイズを変更すると、親の div の幅が調整され、子の div は自分自身を再配置して「行を埋め」、「中央」に留まります。ただし、「塗りつぶされていない行」は左揃えのままになります。

jsなどを使用せずに、divのまったく同じ動作(アニメーションなし^^)に到達する方法はありますか? 私が言いたいことが少し明確になることを願っています。前もって感謝します！

4

3 に答える 3

2

これがこの質問を締めくくる正しい方法かどうかはわかりませんが、私の質問に回答してくださった皆様に感謝したいと思います。なので、CSSだけでこの挙動を作るのは無理だと思います。適切な動作を得るには、jQuery またはメディア クエリが必要です。

これが私が最終的に問題を解決した方法です（実際にjQueryを使用）： http://jsfiddle.net/Ewtx2/

HTML

<div id='container'>
<div id='outline'>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
</div>
</div>

CSS

#container {
    width:100%;
    text-align:center;
    border: 1px red dashed;
}
#outline {
    text-align: left;
    font-size:0;
    display: inline-block;
    padding-left:5px;
    padding-bottom:5px;
    /* for ie6/7: */
    *display: inline;
    border: 1px black dashed;
    zoom:1;
}
.innerbox {
    display:inline-block;
    height:50px;
    margin-top:5px;
    margin-right:5px;
    width:50px;
    background:red;
}

jQuery

var boxAmount = 0;
var newWidth = 0;
setNewWidth();

$(window).resize(function() {
    setNewWidth();
});

function setNewWidth() {
    // get container width and check how many boxes fit into it (account margin/padding)
    boxAmount = ($('#container').width() - 5) / ($('.innerbox').width() + 5);
    boxAmount = Math.floor(boxAmount);
    // multiply the box amount with the box width to get the new width to hold the box amount + padding
    if(boxAmount <= $('.innerbox').length) { 
        newWidth = boxAmount * $('.innerbox').width() + boxAmount * 5; 
    }
    // set the new calculated width
    $('#outline').width(newWidth);    
}

コンテナーの幅を取得し、それを 1 つのボックスのサイズで割り、それをフロアにするスクリプトを作成しました。これにより、コンテナーに収まるボックスの量が得られます。次に、このボックスの量にボックスの幅を掛けると、アウトラインの新しいサイズが得られます。新しいサイズはアウトラインに設定されるため、すべてのボックスを含むアウトラインは常に中央に配置され、右側の奇妙な空白は表示されません。

于 2013-07-24T16:49:26.597 に答える
1

正方形の要素の周りにいくつかのコンテナー div を追加し、ディスプレイとテキストの配置をいじって、純粋な CSS でそれを行いました。ここでデモを見る

HTML:

<div id='container'>
    <div id='outline'>
        <div class='innerbox'></div>
        <div class='innerbox'></div>
        <div class='innerbox'></div>
        <!-- As many as you want -->             
    </div>
</div>

CSS:

#container {
    width:100%;
    text-align:center;
}
#outline {
    text-align: left;
    display: inline-block;
    /* for ie6/7: */
    *display: inline;
    padding:5px 5px 0px 5px;;
    border: 1px black dashed;
    zoom:1;
}
.innerbox {
    display:inline-block;    
    margin:0 auto 0 auto;
    height:50px;
    width:50px;
    background:red;
}

以下のコメントに基づくメモ

ボックスが複数の行を占める場合、右端のボックスとそのコンテナーの右の間にスペースがあります。ある種の JavaScript がないと、この小さなスペースを完全に削除することは不可能です

JavaScriptを使用して完全な機能を追加するために編集

これは、javascript と jQuery を使用して完全な機能を実現しようとする私の試みです: demo here。追加された s のためにウィンドウサイズを縮小すると、まだグリッチが発生し<br/>ますが、修正を探します。回答に加えて、コードが一部のユーザーに役立つ可能性があります。ただし、私のソリューションはあなたのものよりも少し一般的だと思います。適切なアイデアを得るお手伝いができれば幸いです。

後で追加された純粋な JavaScript バージョン

これが、この目的の私の最新バージョンです。純粋な JavaScript であり、コンテナの必要性をなくし、ハードコードされたパディング値を削除します

于 2013-07-24T13:09:26.587 に答える
0

これを処理するためにメディアクエリを使用したい場合は、おそらく次のようになります

@media only screen and (max-width: 1280) {
   .innerBox {
        width: 20%;
    }
}

@media only screen and (max-width: 1024) {
   .innerBox {
        width: 10%;
    }
}

@media only screen and (max-width: 768) {
   .innerBox {
        width: 5%;
    }
}

私が持っているこれらの幅は、単なる任意の数値です。% の幅も任意ですが、ボックスを 100% にうまく収めたい場合は、100 に均等に分割できる必要があります。パディングやマージンは含めませんでした。その部分を把握できると確信しています。 . メディア クエリは、IE8 以下などの従来のブラウザではサポートされていないことに注意してください。ただし、js プラグインをダウンロードして機能させることができます。Google はあなたの友達です

于 2013-07-24T15:04:48.990 に答える