1

Briefly:

How do I lay out N columns of random height portlets all in CSS so that if the browser is resized, the number of is columns reduced (using @media (min-width:)) and the portlets still sit nicely together on the page with no gaps.

This is similar to Float multiple fixed-width / varible-height boxes into 2 columns but more general.

Detail:

I've built a web application (PHP / Zend Framework) with a "dashboard" page made of a series of portlets. The portlets can be arranged in 1, 2, 3 or 4 equal width columns (user selectable) in a fluid layout. When the user resizes the browser window, the columns expand to fill the available width and the portlets also expand horizontally. The vertical height of each portlet is defined by its content. Some are only 1-2 lines, others can be 30-40+ lines of text / tables / image etc.

I want to turn this into a "responsive design" so that the user doesn't have to select the number of columns. On a small screen (eg iPhone) only one column will display. On a wide screen they might have 4 or 5 columns. If the browser window is resized, the number of columns will adjust up or down to allow portlets to stay approx 300-400 pixels wide.

I think I can do this with a bit of jQuery and some server side support (PHP), but would prefer to do it all in CSS if possible (no / minimal javascript).

4

1 に答える 1

0

これを実現するには、メディア クエリとテキストの配置を組み合わせて使用​​します。

自然な状態では、'text-align: justify' は、行の内容が改行を引き起こすのに十分な長さでない限り機能しません。それ以外の場合、テキストは左揃えのままになります。この問題は、行末の非表示のインライン要素に 100% の幅を与えることで解決できます。

'text-align: justify' は個々のインライン ワードに対して機能するように設計されているため、あらゆるインライン要素、さらに重要なことにあらゆるインライン ブロック要素に対して機能します。

最後の行にある可能なすべての要素数を考慮するために、追加する必要がある「プレースホルダー」要素の数は、行ごとの要素の最大数から 2 を引いた数に等しくなります。これらの要素は、行の最後に挿入する必要があります。グリッド (行を分割するために疑似要素を使用していない場合は、「分割」要素の前) をそのままにしておきます。「プレースホルダー」要素は垂直方向のスペースを占有しないため、最後の行がいっぱいになった場合や、サイトがレスポンシブで行ごとの要素数が変化した場合でも、「プレースホルダー」要素はレイアウトに影響しません。最も広いビューに十分なプレースホルダーがある限り、問題ありません。

疑似要素を使用してこれらのプレースホルダーを作成する方法がないため、明らかに、これにはいくつかの意味論的意味があります。最後の行に常に最大数の要素が含まれるグリッドでは、プレースホルダーを使用する必要はまったくありませんが (休憩するだけです)、ほとんどの CMS の状況ではプレースホルダーが必要であり、HTML にハードコーディングする必要があります。 .

'text-align: justify' をコンテナーに適用し、子要素に 'display: inline-block' とパーセンテージ幅を指定するだけで、水平方向のマージンを処理する必要がなくなります! (ああ、言いましたが、このトリックを使用すると、要素に float を使用する必要がなくなるので、これらの不名誉な clearfix と clear div にも別れを告げることができます!)

「display: inline-block」を使用する場合、要素は font-size、line-height、vertical-align、word-spacing などのさまざまなタイポグラフィ CSS プロパティに翻弄されることに注意する必要があります。これらのプロパティは、レイアウトの空白に目に見える影響を与えますが、必要に応じて簡単に調整または削除できます。99% の場合、'font-size: 0.1px;' を設定します。コンテナに、子要素に 'vertical-align: top' を追加するとうまくいくはずです。

参考文献

于 2013-12-05T02:52:21.293 に答える