0

Masonry スタイルのページ レイアウトを作成しており、ページがフル サイズでないときにタイルを中央に配置する方法を見つけようとしています。私が現時点で持っているものは次のようなものです：

| [ TILE ] [ TILE ] [ TILE ] [ TILE ] | //Full Width

| [ TILE ] [ TILE ] [ TILE ]          | //Lower Screen Resolution
| [ TILE ]                            |

私が欲しいのは：

| [ TILE ] [ TILE ] [ TILE ] [ TILE ] | //Full Width

|      [ TILE ] [ TILE ] [ TILE ]     | //Lower Screen Resolution
|      [ TILE ]                       |

以前の投稿で提案されているようにインライン ブロックを使用してみましたが、おそらく「タイル」が浮かんでいるために、ここでは機能しません。解決策はありますか？

ありがとうございました

4

2 に答える 2

0

これは、CSS3 メディア クエリを使用した回答です。含まれている要素の幅を、保持できる要素の数に調整するだけです。私の例は単純すぎますが、探している結果が得られます。

つまり、私の例では、要素はそれぞれ合計 200px です。画面の幅が 1000px の場合、5 つの要素を保持できます。幅が 959px になるとすぐに、5 つの要素を保持できなくなります。そのため、幅を 4 つの要素で 800px に調整します。必要に応じて、スケールダウンまたはスケールアップを続けることができます。

ここに私の jsFiddle があります: http://jsfiddle.net/NzTPr/

HTML 

<div class="container">
     <div class="block">
          content
     </div>
     <div class="block">
          content
     </div>
     <div class="block">
          content
     </div>
     <div class="block">
          content
     </div>
     <div class="block">
          content
     </div>
</div>

CSS 

.container {
     width: 1000px;
     margin: 0 auto;
}
.block {
     width: 190px;
     margin: 5px;
     background-color: green;
     float: left;
     color: white;
}

     @media screen and (max-width: 959px) {  
          .container {
               width: 800px;
          }
     }
     @media screen and (max-width: 759px) {  
          .container {
               width: 600px;
          }
     }
     @media screen and (max-width: 559px) {  
          .container {
               width: 400px;
          }
     }
于 2013-07-04T22:50:56.077 に答える
0

親要素で使用inline-blockするtext-align: centerには、プロパティを削除する必要がありfloatます。

inline-blockただし、それが目的の機能を果たしていることがわかります。そのfloatため、フロートを見逃すことはまったくありません。

これは本当に基本的な例です: http://jsfiddle.net/ppsHy/

于 2013-07-04T21:40:45.420 に答える