問題タブ [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.

28 問題
Newest
Active
Bountied
318
Unanswered
0 投票する
2 に答える
1592 参照

css - レイアウトにemを使用すると、異なるブラウザ間で不整合が発生します

弾力性のあるレイアウトを使用してサイトを構築しようとしています。Eric MeyerのCSSリセットを使用body {font-size:62.5%}し、スタイルシートでも使用しました。

編集：これが私のHTML構造とCSSです

<html>
<head>
</head>
<body>
<div id="container">
<div id="gallery">
</div>
<div id="other">
</div>
</div>
<div id="footer">
</div>
</body>
</html>

`html {bacgroound：url（）繰り返しなしの上部中央が修正されました;}

`

ご覧のとおり、の幅を固定するとbody、backgroundの#otherと#footerは固定されたままになります。そこで、を設定widthし、ギャラリーとのコンテンツを中央に配置することで、それを回避しようとしました。100%margin: 0 8em 0 8em#other#footer

私が達成しようとしているレイアウトは、基本的に写真のギャラリーを含む1列のレイアウトです。ギャラリー全体をページの中央に配置する必要があります。私はem定義marginに使用しましたが、これによりブラウザごとに異なる結果が発生します。ギャラリーが1つのブラウザーの中央に配置されている場合、他のブラウザーは異なる結果を表示します。Firefox、Chrome、IE9を試しました。

em測定単位として使用して同一のレイアウトを作成する方法はありますか？または、固定レイアウトを試して、px代わりに使用する必要がありemますか？

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

css - CSS エラスティック テキストボックス

私の要件はこれです。幅 5px のテキスト ボックスが必要です。その上に何かを入力すると、幅が広がるはずです。jsなしでCSSのみを使用して行うことは可能ですか

thnx

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

css - 現代の画像ギャラリー：流動的または弾力性？

ux.stackexchangeからのクロスポスト（提案どおり）

私はUXとIA、そしてインターフェースとソリューションの設計に関するすべてに不慣れです。グリッドに基づいた単純な画像ギャラリーを作成する必要があります。レスポンシブデザインとメディアクエリについて読みました。

わかりました。ワイドスクリーンでは、7列のグリッド、ラップトップ5列、タブレット3、smarthpone1があります。これはかなりクールです。widthプロパティにパーセンテージを使用して、流動的なレイアウトでこれを行いました。そして、すべてのビューポートサイズに柔軟に対応できるため、このソリューションが気に入っています。

しかし、ユーザーが「コマンド+」または「コマンド-」キーを使用してフォントサイズを変更した場合はどうでしょうか。画像の幅がパーセンテージの場合、コンテナサイズは変更されず、画像も変更されません。結果は少し奇妙です。すべてが小さくなりますが、画像は変化しません（まあ、マージンが変化します、それはさらに奇妙です）。

しかし、幅にemを使用すると、流動的なレイアウトが得られなくなります。

2つのレイアウトをどのように組み合わせるのですか？

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

android - Android 用の単一のエラスティック/リキッド レイアウト画面の作成

すべての画面サイズに合わせてサイズを変更するliquid/elastic画面レイアウトを作成することは可能ですか?Android

現在、小、中、大、特大などのさまざまなレイアウトで遊んでいますが、本当に必要なのは、収まるようにスケーリングする単一のレイアウトだけです。

例えば。割合ベースのレイアウト。

私が作成しているアプリは、スペースをより有効に活用するという点で、特に大きな画面を利用する必要はありません。

ホーム画面は 2 つの画像、ボタンの束、および下部の広告だけです。私は単純に、広告が下部に残り、他のすべてが画面サイズに応じて拡大されることを望んでいます。

非常に単純化されたインターフェイスのために 4 つの異なるレイアウトを作成する必要があるのは、非常に複雑に思えます。

アドバイス大歓迎です！

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

css - 固定幅の中央 div とその両側の 2 つの伸縮幅 div

ページの 100% 幅を埋める div 内に 3 つの div がある配置を作成しようとしています。中央の div の幅は固定され、外側の 2 つの div はそれぞれ残りのスペースの 50% を占有します。これは CSS を使用して実現できますか?

次のコードを使用して、これを達成しようとして、動作しないhttp://jsfiddle.net/6y5hn/フィドルを設定しました。

CSS の場合:

ジェームズ

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

javascript - アンカー タグ内の部分的なテキストに省略記号を挿入します

<a href="#" >some lengthy text -- 07 May 2014 -- order ID#12345 </a>

上記のように、いくつかのテキスト、日付、数値(テキスト -- 日付 -- 数値形式) があるアンカータグが内部にあり、アンカーコンテンツ全体がそのような方法で out div に従ってテキストのみを省略したい( text,number,date) は改行しないでください。

上記の例では、テキストのみを省略したい (長いテキスト) 数値と日付を邪魔しないようにする必要があります

CSS を使用してテキストの周りにタグを配置しようと<p>しましたが、適切に省略できますが、問題はアンカータグの下線であり、2 ピースで構成されているように見えます http://jsfiddle.net/Vc4N6/3/

javascript でこれを行うより良い方法はありますか? CSSに苦労する必要がないように（別のブラウザでは、IE8と9が他のブラウザに必要です。）

注: jQuery ソリューションは使用しません。純粋な JavaScript にする必要があります。

編集：

上記の質問の解決策を得ましたが、私の要件はもう少しです。リストにこれらの項目を使用します。リストに追加した後、各項目にさまざまなテキストがある場合、テキストと日付の間にスペースが導入されます。こちらを参照してくださいhttp:// jsfiddle.net/Vc4N6/13/

理想的には、次のようになります

  • これは非常に長いテキストです 長いテキストです.. -- 2014 年 5 月 7 日 -- 注文 ID#12345
  • 短いテキスト -- 2015 年 6 月 6 日 -- オーダー ID#46453

12345678910