0

単純な HTML および CSS グリッドで直面している小さな問題があります。n 個のボックスのグリッドがあります。ブラウザーまたはその親の幅に応じて、任意の数の列を含めることができます。

以下の例のように、表示をインライン ブロックに適用するのは非常に簡単です。

ul {
    list-style: none;
}

ul li {
    width: 100px;
    height: 100px;
    display: inline-block;
    background: #f00;
}​

http://jsfiddle.net/2nscQ/を参照してください

しかし、誰かがブラウザーの幅を変更したときに、列の数をスムーズに変更したいと考えています。それはCSSで可能ですか？それとも、良い jQuery プラグインやトリックはありますか?

例: http://www.squarespace.com/templates/

非常にシンプルで小さなソリューションを探しています。その小さなことのために完全なライブラリを追加することはできないからです。アプリケーションですでに jQuery を使用しています。CSSとjQueryで可能であれば。それは素晴らしいでしょう。

4

2 に答える 2

0

はい、現在のブラウザの動的ページを変更できます。jQueryを使用してブラウザーの幅を確認し、現在ユーザーが変更したときにブラウザーの幅をアタッチする$(window).width()ようなイベント ハンドラーを使用できると判断しましresize()た...その他: CSS で行った場合、ほとんどの開発者は動的に Web サイトを設定します。幅を 100% 拡大します。

// これは私が追加した CSS メディア クエリの例です:-

CSS メディア クエリは、定義できるすべての方法で CSS に追加できます。

最初の例:現在のページ幅が 480px より大きくなく 480px 未満の場合に、特定の CSS をリンクします。

最初の例を使用することをお勧めします。CSS グリッドをオーバーライドできることはわかっています。ブラウザのサイズが変更されたときに何度でも設定できます。異なるファイル名を使用して.css、以下のようなファイルとリンクをさらに作成できます。

<link rel="stylesheet" type="text/css" href="smallscreen.css" media="only screen and (max-width: 480px)" />

2 番目の例:<style>要素内にインポートされたスタイルシート:

@import "smallscreen.css" only screen and (max-width: 480px);

3 番目の例:要素内で<style>メディア ルールとして:

<style type="text/css">
  @media only screen and (max-width: 480px){
    /* rules defined inside here are only applied to browsers that support CSS media queries and the browser window is 480px or smaller */
  }
</style>

...そして、特定のブラウザで作業している場合は、次を使用できます。

Google Chrome の場合:

@media screen and (-webkit-animation) {
   div.grid_24 {
     // Webkit only rules 4
 } 
}

ファイアフォックス:

   @media screen and (max-width:320px;) {        
           div.grid_24 {
           //..
          }
       }

...そしてオペラ：

 @media all (-o-min-device-pixel-ratio:0) {  
        div.grid_24{  
         //..
    }   // as i know maybe for opera 10 and above

または、すべてに使用できます。

@media all and (max-width:480px) {
   div.grid_24 {
   //..
  }
}

それで全部です。メディア クエリに関する詳細なリファレンスが必要な場合は、 w3、htmlGoodiesまたはcss-trickを参照してください。

于 2012-11-05T11:44:27.343 に答える
0

確かにCSS3のcolumn-widthプロパティを使用して列の幅を設定し（おそらく、emではなく単位として使用しますpx）、すべてのliアイテムを列幅が設定された1つのコンテナに入れるだけですか？

w3schools の例では、ブラウザー ウィンドウのサイズを変更すると、列数がスムーズに変更されます。

于 2012-11-06T13:35:42.773 に答える