問題タブ [liquid-layout]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
9 に答える
41919 参照

html - CSS で、残りの幅を使用する右側のテーブルで左側の固定幅の列を取得するにはどうすればよいですか?

だから私は、純粋な CSS を使用して、決してテーブルをレイアウトに使用しないというゴスペルを使用しようとしました。しかし、信じられないほどの痛みと苦悩の後で、私はもうあきらめる準備ができています. 私は、CSS で何かを達成するために何らかの努力を惜しみません。誤解しないでください。しかし、レイアウト テーブルで実行できる非常に単純なことのいくつかがCSS ではまったく不可能であるように思われる場合でも、概念的な純粋さが実際に打撃を受け始めるかどうかは気にしません。

今、私は怒っているように見えるかもしれません。私は無駄な時間を過ごしたことに腹を立てています。QuarkXpress の背景から出てきた人々が役に立たない固定幅のデザインを私に手渡してきたことに腹を立てています。CSS の失敗した約束に腹を立てています。しかし、私は議論を始めようとしているわけではありません。純粋な CSS をもう一度試してみるか、まとめていつでも好きなときにレイアウト テーブルを使用するかを決定する、1 つの簡単な質問に対する答えを本当に知りたいと思っています。実際にそうでない場合、これは不可能だと考えてレイアウトテーブルに戻りたくないからです。

問題は次のとおりです。純粋CSS レイアウトを使用して、左側に固定幅の列を配置し、その右側にデータ テーブルを配置し、データ テーブルが残りの部分をきちんと占めるようにする方法はありますか?どんなスペースがありますか?つまり、幅 100% の 2 セル レイアウト テーブルを左側のセルに固定幅にすることで簡単に達成できる同じレイアウトですか?

0 投票する
8 に答える
16503 参照

html - Web ページの幅を自動的に変更するにはどうすればよいですか?

HTML で、Web ページをユーザーのモニターに拡大する方法はありますか? たとえば、私は 15 インチを持っていますが、他の人は 24 インチを持っています。Web ページは画面上では小さくなりますが、最小サイズに収まります。ページを 100% または 95% に拡張するにはどうすればよいですか?

0 投票する
1 に答える
1539 参照

css - CSS ヘルプ、流動的なメニューの作成

このメニューについては以前に助けてもらいましたが、今は別のリクエストがあります。

メニューは固定幅で問題なく動作しますが、一番上のメニュー カテゴリでのみ単語を折り返す必要があります。n 個のカテゴリを持ち、幅を均等に分散できるようにする必要があります。明らかに、n は妥当な範囲内です (50 のカテゴリを作成する予定はありません) が、さらに追加できるようにする必要があり、幅の制限に達することを心配する必要はありません。

助けてくれてありがとう。

リンク:

http://www.seth-duncan.com/Test/TestMenu.html

-セス

0 投票する
1 に答える
1732 参照

css - CSS: メニューの動的幅

の正確な複製

CSS ヘルプ、流動的なメニューの作成

メニューは固定幅で問題なく動作しますが、トップ メニュー カテゴリでのみ単語を折り返す必要があります。n 個のカテゴリを持ち、幅を均等に分散できるようにする必要があります。明らかに、n は妥当な範囲内です (50 のカテゴリを作成するつもりはありません) が、さらに追加できるようにする必要があり、幅の制限に達することを心配する必要はありません。

助けてくれてありがとう。

リンク:

http://www.seth-duncan.com/Test/TestMenu.html

0 投票する
1 に答える
929 参照

jquery - モーダルのjQuery動的高さ幅

既に存在するさまざまな aspx ページに使用されるモーダルを作成しているため、ページを保持する必要がある div (ajax.load メソッドを介してロードされる) は、必要に応じて垂直方向および水平方向に拡張する必要があります。異なるポップアップ ページ。div に挿入するドキュメントの高さと幅を取得するにはどうすればよいでしょうか。これにより、読み込まれる aspx ページに基づいて高さと幅をアニメーション化して拡大および縮小できます。

ありがとう。

-セス

0 投票する
4 に答える
522 参照

architecture - 異なる解像度/画面で同じアプリを提供する方法

シナリオ: 同じアプリを異なる画面に公開する必要があります。たとえば、標準の 15 インチから 17 インチ、ポータブル 10 インチ、モバイル 4 インチで、異なる解像度で動作する可能性があります。

質問: 使用可能な領域に応じて再配置されるリキッド レイアウトを使用しようとしていますか?それとも、サポートされている特定の解像度/画面サイズごとに最適化された、N (範囲ごとに 1 つ) の個別の UI レイヤーをロールバックしますか.

この種の問題に関する業界標準は何ですか?

画面がいずれかの方法でサイズ変更されたときに消えたり戻ったりする優先領域で画面を分割する非常にトリックなレイアウトを考え出すことは理にかなっていますか?

iPhone アプリ (またはその他のパーム デバイス) がデスクトップ バージョンのようなものになることはあり得ないことは誰もが知っているので、その場合 (4 インチ以下)、異なる UI をロールバックする必要があると想定していますが、中間はありますか?地面 (たとえば、13 インチから 7 インチの画面の間で、後者は主な入力として指を必要とします) で、リキッド レイアウトを使用するのが理にかなっている場所はどこですか?

0 投票する
2 に答える
6289 参照

ruby-on-rails - Liquid を Ruby on Rails レイアウトとして使用する

Ruby on Railsレイアウトを作成したいのですが、 Liquid形式にする必要があります。

基本的に私がやろうとしているのは、ユーザーが独自のレイアウトを作成してデータベースに保存できるようにすることです。

layout.erb ファイルで使用しようとし <%= Liquid::Template.parse(<code from database>).render %>ましたが、「yield」コマンドを使用できません (これはレイアウトであるため、ページをレンダリングする方法が必要です)。

しかし、「layout.liquid」を使用すると{{ content_for_layout }}、検索は機能しますが、データベースから詳細をロードできません (HTML コードを意味します..)

私は自分自身を明確にしたことを願っています:D)

0 投票する
2 に答える
254 参照

css - LiquidCSSレイアウトの問題

個人のWebサイト用にCSSリキッドdivベースのレイアウトがあります。アドレスは http://danberinger.com/preview.htmlです。

問題は、フッターセクションがインラインで表示されているかのように動作させたくないことです。これは、ウィンドウがintro_containerに必要なピクセル幅を超えて引き伸ばされると、フッターdivがその右側に移動するためです。このフッターは、スペースが許す限り、上下に移動するのではなく、ページの下部に配置したままにしておきたいと思います。

あなたが提供できるどんな助けにも感謝します。私はこれまでこのフォーラムが大好きで、とても役に立ちました。

0 投票する
4 に答える
2445 参照

javascript - 左の浮動リストの幅を見つけ、ラッパー div に適用して css - jQuery を使用して中央揃えにしますか?

リキッド レイアウトの左の列である div の中央に ul を配置したいと考えています。そのためには、ul をラップするために使用した div の幅を設定する必要があります。注: リスト項目 (およびコンテンツ) は、php を使用してデータベースから取得されます。

jquery を使用してこれを行う方法についての提案に興味があります。

以下のマークアップを検討してください。

このCSSを使用:

JavaScriptに関してはあまり賢くはありませんが、解決策には次のようなものが必要だと思います:

  1. #left-column の使用可能なコンテンツ領域の幅を見つけます。
  2. その幅に収まる li の数を計算します (#list-wrap のマージンとパディングを考慮して)。
  3. 図を最も近い 200 ピクセル (幅 160 ピクセル + 余白 2x20 ピクセル) に丸めますか?
  4. 幅を #list-wrap に適用します。

これは、開始するための基準の一部を満たす以前に使用したものです。

よろしくお願いいたします。

ニールス

0 投票する
3 に答える
183 参照

html - CSS-高さが設定されていないのに、なぜ設定されているように見えるのですか?

わかりました、これは本当に迷惑で、なぜこれが起こっているのか理解できません。CSS Stickyフッターを機能させようとしたときに、いくつかの問題が発生した可能性があります。

行っていたのですが、体が液体ではなかったので、これを試してみようと思いました: http: //ryanfait.com/sticky-footer/

しかし、結果は次のようになりました: http ://www.serverbart.com/film/

青いボックスはギャラリーに似ているはずなので、色は気にしないでください:p私がやろうとしていることは理解できると思います。また、div構造の再設計についての意見を受け付けています。私はさまざまなレイアウトを本当に上手にしようとしていますが、これは私を少し悩ませてきました。