1

レスポンシブ デザインのポジショニングの問題を修正しようとしています。

インライン ブロックとして表示される 4 つの (ただし、多かれ少なかれ可能性があります) div を含むコンテナー div があります。ページのサイズが変更されたときに（可能であればCSSを使用して）1行あたりのdivの数を制御する方法を知りたいです。たとえば、4 つのコンテナがコンテナに収まらなくなった場合、最後のコンテナが 2 行目に移動されます。その場合、最初の行に 2 つの収容者、2 番目の行に 2 つの収容者を配置したいと思います。その方法がわかりません。あなたの助けを歓迎します！

編集: レイアウトが次のような場合、6 つの収容者になることもあります:

コンテナの数は可変です。行ごとに同じ数のコンテナを持ちたいだけです

html:

<div class="container"> 
   <div class="containee"></div>
   <div class="containee"></div>
   <div class="containee"></div>
   <div class="containee"></div>
</div>

CSS:

.containee {
  width:200px;
  height:200px;
  display:inline-block;
  background-color:tomato
}

例はここで見ることができます: http://cssdesk.com/uGLbq

(PS : Web を検索して解決策を見つけようとしましたが、このトピックに関連する適切なキーワードがよくわかりません)

4

4 に答える 4

2

CSS（AFAIK）ではできません。

Javascript を使用してリアルタイムで動的に「計算」を行うことができます。

あなたの場合、

  • あなたは（その瞬間に）1ブロックの幅を知っていた、
  • （その瞬間に）ウィンドウの幅を簡単に取得できます。
  • あなたは（その瞬間に）あなたのブロックの数を知っています;

次のコードのアルゴリズムを適用するだけです ((1) ページを初めて開いたとき、(2) ブロック数が変わるたび、または (3) 解像度が変わるたび)。

// EXAMPLE OF INPUT
var windowWidth    = 1400;  // read it...
var blockWidth     = 200;   // read it or use const...
var numberOfBlocks = 10;    // read it... 


// Calculate the maximum number of blocks per row
var maxBlocksPerRow;
for (var i=0; i < numberOfBlocks; i++) {
   if ( (blockWidth * (i + 1)) > windowWidth){
      maxBlocksPerRow = i;
      break; 
   }
}

// Check the highest 0 module combination while iterating backwards
var magicNumberForMatchingBlocks = 1; // if not found, it will be 1.
for (var i = maxBlocksPerRow; i > 0 ; i--) {
   if ( (numberOfBlocks % i) == 0){
      magicNumberForMatchingBlocks = i;
      break;
   }
}

alert("With " + numberOfBlocks + " blocks, each one wide " + 
      blockWidth + " pixels, and a window wide " + windowWidth + " pixels, 
      the number of blocks per row for having always 
      the same number of block in any row is: " + magicNumberForMatchingBlocks);

次に、その数を使用して、要素を Javascript で入力または再配置し、jQuery などの Javascript ライブラリを使用します。

于 2013-01-26T01:01:05.163 に答える
1

html:

<div class="container">
    <div class="grouped">
        <div class="containee"></div>
        <div class="containee"></div>
    </div>
    <div class="grouped">
        <div class="containee"></div>
        <div class="containee"></div>
    </div>
</div>

CSS:

.containee {
  width:200px;
  height:200px;
  display:inline-block;
  background-color:tomato
}
.grouped {
  float:left;
}
于 2013-01-25T23:00:27.777 に答える
0

これを試して：

.container
{
  min-width: 410px;
}
于 2013-01-25T22:57:05.277 に答える
0

ページが 4 つに収まる場合は.containeeafloat:left;を指定します。それらは互いに隣り合わせに配置されます。それ以外の場合は、別の div 行が作成されます。margin-top:5px;別の行を取得した場合に備えて、2 行目の div が最初の行の div に接着されないようにすることもできます。このアプローチでは.containee、各行に同じ数を含める必要はないことに注意してください.4の場合、サイズを変更すると、3 - 1、次に2 - 2...など.

于 2013-01-25T22:58:01.703 に答える