5

私は流動的なレイアウトとテキスト整列で固定幅のボックスを持っています：この投稿された解決策でそれらを正当化します：

等間隔のDIVを備えた流体幅

しかし、レスポンシブレイアウトには、さらに2、3行あるので。

これはもちろん起こります：

------    ------    ------    ------    
|    |    |    |    |    |    |    |    
|    |    |    |    |    |    |    | 
------    ------    ------    ------    
------    ------    ------    ------    
|    |    |    |    |    |    |    |    
|    |    |    |    |    |    |    | 
------    ------    ------    ------    
------          ------        ------    
|    |          |    |        |    |   
|    |          |    |        |    | 
------          ------        ------

しかし、私はそれをこのようにするのが好きです：

------    ------    ------    ------    
|    |    |    |    |    |    |    |    
|    |    |    |    |    |    |    | 
------    ------    ------    ------    
------    ------    ------    ------    
|    |    |    |    |    |    |    |    
|    |    |    |    |    |    |    | 
------    ------    ------    ------    
------    ------    ------   
|    |    |    |    |    |  
|    |    |    |    |    |
------    ------    ------

もちろん、それは仕事ですが、これを行うためにjavascriptを使用せずにこれに対する解決策はありますか？

text-align-last：leftは機能する可能性があると思いましたが、機能せず、まだ公式のイーザーではありません。

考えられる解決策のアイデア：

私は可能なjavascriptソリューションを思いついたが、それについてはあなたの助けが必要だ。

考えられる解決策についての私の考えは次のとおりです。

最後の行を左揃えにするには、実際には、これらの欠落しているスペースを非表示のボックスで埋める必要があります。手作業で簡単に行うことができますが、divの数はユーザーが生成し、常に異なります。

したがって、雑草は、それを機能させるために、欠落しているボックスの数を知り、それらをすでに持っているボックスに追加する必要があります。

だからここに私の（幼児の）srciptingのアイデアがあります：

1. Count all divs
2. Divide them with 4 (cause we have 4 in a row)
3. If the SolutionA has no decimal, nothing will happen cause all is good
4. If the SolutionA has a decimal, remove it
5. SolutionA + 1 = SolutionB
6. SolutionB x 4 (cause we have 4 each in a row) = SolutionC
7. SolutionC - SolutionA = Number of divs we need to add.

それをjavascriptに渡すために、すでに行にあるアイテムの数を見つける方法があるかどうかはわかりません。これは良い理由であり、ブラウザの幅に応じて行番号が変わるたびに行番号を調整することなく、レスポンシブレイアウトでフォーミュラが機能します。

これは良い考えですか？

誰かがこれをしたいと思っていることを願っています。

使用するフィドルは次のとおりです：http： //jsfiddle.net/L2mPf/

ありがとうございました。

私の答えを超えて見てください。

4

3 に答える 3

7

OK、これがcssを使ったとても簡単な解決策です：

単純に、連続する数のdiv（この場合は4）を追加し、高さを1pxにします。

見るものはなく、JavaScriptなしではすべてが魅力のように機能します。

これが新しいフィドルです：http：//jsfiddle.net/L2mPf/1/

cssとこのソリューションに焦点を合わせてくれた@GGGに感謝します。

于 2012-02-06T01:25:39.103 に答える
0

ボックスの高さを指定する必要があります。現在のケースでは、ボックスが整列していないため、ボックスの内容が異なる可能性があります。

于 2012-02-03T09:21:28.957 に答える
0

CSS で、ボックスの最小高さを設定します。

.box-class {
    min-height: 100px;
    height: auto !important;
    height: 100px;
}

たとえば、100px は IE6 の最小高さの修正を含みます

また、配置の問題が解決しない場合は、ボックスを左にフロート (および表示ブロック) し、親コンテナーを開いたままにするためにclearfixを使用することもできます。(リンク内の clearfix css の例)

于 2012-02-03T11:39:50.910 に答える