問題タブ [elasticlayout]

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 投票する
4 に答える
423 参照

html - 画像と動的レイアウト

私は、em ベースのレイアウトの Web サイトで作業しています (ユーザーがフォント サイズを増減したときに、適切に拡大および縮小できます)。このサイトには、すべてのページに表示されるヘッダーがあります。すべてのページに「ヘッダー」div があり、サイト全体の css ファイルには次のコードが含まれています。

問題は、これが実際にはうまく伸びないことです。テキストのサイズが大きくなると、高さと幅が変わりますが、**画像のサイズは大きくなりません。単純に繰り返す*.*

繰り返したり途切れたりするのではなく、画像を引き延ばしたりつぶしたりするにはどうすればよいですか? (可能であれば、css ベースのソリューションが必要です... いくつかの html のアイデアが既に用意されています)。

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

css - CSS:テキスト付きのリキッドバーが拡張されない

のが与えられた水平バーがありwidthます100%978px横棒の中に、コンテナ内で左揃えのテキストがあります。ブラウザウィンドウが縮小されて978px幅が狭くなると、ページの下部にスクロールバーが表示されます。右にスクロールすると、バーはページの幅にまたがらず、代わりに残されます。なぜこれが起こるのかは理解していますが、それを修正するために何をすべきかわかりません。何かアイデアがあれば教えてください。ありがとうございました!

サンプルページ

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

python - wxPython を使用して 3 ペイン ウィンドウをレイアウトするにはどうすればよいですか?

wxPython を使用して 3 ペイン ウィンドウをレイアウトする簡単な方法を見つけようとしています。

左ペインにツリー リストを表示し、右ペインを 2 つに分割して、上部に編集コンポーネント、下部にグリッド コンポーネントを配置したいと考えています。

次のようなもの:

ウィンドウのサイズを変更できるようにし、境界線をドラッグしてウィンドウ内の各コンポーネントの (相対的な) サイズを変更できるようにしたいと考えています。

サイザーやスプリッター ウィンドウ コンポーネントの組み合わせが必要だと思いますが、ドキュメントや Web でこの種のウィンドウの適切な例を見つけることができません。

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

html - 弾性レイアウトでの画像の自動スケーリング

親コンテナの50%に自動スケーリングされる、伸縮性のあるレイアウトのWebサイトに2つの画像を並べて表示するにはどうすればよいですか?

私は昨夜それで遊んでいましたが、行き過ぎませんでした。

私がdivを使って行ったとき、それらは互いに重なり合っているか、最初に2番目の画像が下に表示されていました。

テーブルを持って行くと、テーブルが画面よりも広くなり、垂直スクロールバーになります。

画像のサイズやユーザーの解像度は事前にわかりません。理想的には、JavaScriptを使用せずに純粋にcssで設定します。

設定することでコンテナに収まるように単一画像の自動スケーリングを使用して他のページで運が良かったのですmax-width:90%が、ここではこのトリックを適用できません。面白いことに、このシナリオのmax-widthはウィンドウ(親要素)に従って設定されますが、上記の例では、max-widthは画像自体の幅に従って設定されます。

私の英語は申し訳ありませんが、不明な点がある場合はお問い合わせください。

ありがとう

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

html - 伸縮自在の垂直レイアウトを作成するには?

ヘッダーとコンテンツの 2 つの領域があるページがあります。
ヘッダーは[もちろん]上部に固定する必要があり、高さは固定されておらず、その下にコンテンツがあります。

ポイントは、オーバーフローした場合にコンテンツ領域をスクロールする必要があるということです...同様に、ヘッダーは常にそこにある必要がありますが、コンテンツは下にスクロールできます。つまり、バーは常に上部にあり、ページスクロール。

「フッター」の高さが固定されている別のページでこれを行うためにJSを使用しているので、「コンテンツ、ページの高さからフッターの高さを差し引いたものを使用してください」と言うことができます。

これを HTML+CSS のみで実装できますか、それとも JS を使用する必要がありますか? そしてどうやって?

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

javascript - Javascriptのエラスティックリスト

私は最近ElasticListsに出くわし、それらが完全にクールであることに気づきました。

エラスティックリストを提供できるjavascriptライブラリを知っている人はいますか?そうでない場合は、自分で書くためのヒントも大歓迎です。:)

ありがとう、

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

css - CSS:中央揃え、左流動性、右固定、最小/最大幅のソース順序レイアウト

タイトルはそれを言います。次のような2列のCSSレイアウトが必要です。

  • 中央揃え-メインコンテンツはページの中央揃え
  • 固定(ピクセル)右列幅
  • 左の列が流動的です-使用可能なすべてのスペースから右の列の幅を差し引いたものを使い果たします
  • ソース順-左側の列のコンテンツは、HTMLソースの右側の列のコンテンツの前にあります
  • 最小幅を考慮します-私の例では760px
  • 最大幅を考慮します-私の例では1024px

ウィンドウが最大幅よりも大きい場合、コンテンツはページの最大値の中央に配置されます。ウィンドウが最大幅よりも小さい場合、水平スクロールバーが表示される最小幅よりも小さい場合を除いて、コンテンツはページの100%を占めます。

これらのプロパティをサポートしていないブラウザーの最小/最大幅を処理するためにいくつかのマイナーなJavaScriptを使用するつもりですが(私はあなたのIE6を見ています)、レイアウトのその部分を劣化させるのと同じように喜んでいます。

それはテーブルでシンプルなドロップデッドです。私は文字通り何百ものサンプルレイアウトを調べましたが、近いものがいくつかありますが、私が求めているすべてのことを実行できるものはありません。問題は、同じスタイルで流動的な左列とソースの順序を取得することであるようです。私は、適切なソース順序を持つ固定左/流体右(私が望むものの反対)、またはソース順序なしの流体左/固定右のいくつかの例を見つけましたが、両方ではありません。

フロートを使用するか負のマージンを使用するかは関係ありませんが、絶対的なポジショニングは避けたいと思います。

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

html - HTML 要素のパーセンテージの高さの問題

最も頻繁にアクセスするリンクを集めたスピード ダイヤルのようなホームページを作成しました。今、私はそれを伸縮自在にしたので、ブラウザウィンドウが水平方向に狭くなると、ボックスも狭くなります。

私が欲しいのは、ブラウザウィンドウが垂直方向に狭まると、そのボックスが再び狭くなることです。

高さのパーセンテージ ルールをいくつか試してみましたが、うまくいきませんでした。助けが必要です。

これは、CSS が分離されていないため、1 つのファイルのページで作業しているページです。 http://www.purplerspace.com/dl/

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

jquery - jquery エラスティック アニメーションが完了しない

http://www.thebraproject.com/collection

物干しロープを後方にスライドさせると、弾性アニメーションを完了することなく、3 つおきのアイテムが停止します。なぜそれが起こっているのか誰にもわかりますか?

jQuery用のAnythingSliderを使用して機能させています。

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

html - DIV に親の親から「em」値を継承させる方法

特定のオブジェクトのエラスティック レイアウトの "em" 値は、オブジェクトの親に対して相対的であることは誰もが知っています。たとえば、次のようになります。

<div id="div1" style="font-size:1em;">
<p>Hello</p>
<div id="div2" style="font-size:0.5em;">
<p>Hello</p>
<div id="div3" style="font-size:0.5em;">
<p>Hello</p>
</div>
</div>
</div>

しかし、下位の DIV の em 値を「リセット」したり、チェーンの上位の親からその値を取得したりすることは可能ですか?

基本的に、ネストされた DIV がいくつかあり、内側の DIV の 1 つにドキュメント独自の em 値を使用する必要があります。DIV の親の 1 つがすでに小数値を使用しているため、1em の使用は適切ではありません。

前もって感謝します

サイモン