問題タブ [yui-pure-css]
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.
css - ガターを純粋なグリッドに追加する方法
使用している純粋なグリッドにガターを追加する必要があります。デフォルトでは、次の例のような通常の純粋なグリッド css で動作する必要があるためです。
私がこれまでに試したこと：
私も試してみましたが、うまくいきbox-sizingませんでした：
また、ブラウザのサポートについても心配する必要があります。それほどではありませんが、古いブラウザがそれらを正しく表示するなら素晴らしいことです。
html - これが反応しないのはなぜですか？
以下のSASSとHTMLコードがあります。Yahoo の PureCSS を使用しています。
私がやろうとしていること
これを大きなデスクトップサイズの画面用に3列のレイアウトにし、pure-lg-3-24クラスが基本的にマージンとして機能するようにしてから、モバイル画面用の1列のレイアウトに折りたたもうとしています。
実際に何が起こるか
以下のクラスに (大きなデスクトップ サイズのブラウザー幅で)追加pure-u-1すると、すべての html コンテンツが 1 つの列に収まります。削除するpure-u-1と、すべてが一緒に折りたたまれ、テキストが重なり合って読めなくなります。どうしてこれなの？レスポンシブに動作させるための出発点は何ですか? PureCSS ではネストされたグリッドが許可されていると思いました。
SASS
HTML
javascript - divを変更せずにテキストエリアの幅を広げるには?
テーブルの構造全体を損なうことなく、純粋なCSSを使用して次の場合にテキストエリアのサイズを変更する方法:
見出し:
行 1 :
ブラブラ問題は、「pure-u-md-1-5 div」クラスを使用して幅を適用したまま Textarea が残ることです。
style="width:400px" のように幅を広げようとすると、テキストエリアの幅が増えません。
div の幅を広げようとすると、テキスト領域が次の行にジャンプします。400px から 490 または 495 のようにピクセルを減らして調整すると、ページをズームしようとすると、テキスト領域が次の行に移動します。
divを変更せずにテキストエリアの幅を広げる方法は?
css - box-sizingを尊重しないphantomjs
プロジェクトのスクリーンショットを取得するために、phantomjs (1.9.8) を使用しています。このプロジェクトは、レスポンシブ レイアウトにPure CSS グリッドを使用します。これは、私がやっていることの HTML デモを簡略化したものです。
http://output.jsbin.com/sobabiy/1
これは、phantomjs が表示するものです (ビューポート 1024x768):
私はCSSのスキルに少し錆びていますが、私の直感はどういうわけかです
考慮されず、最後のノードが「ドロップ」します。他にどのようなオプションがありますか?
yui-pure-css - purecss で .pure-group を使用して水平グループ化された入力を作成する方法は?
http://purecss.io/forms/の「グループ化された入力」セクションから、垂直/積み重ねられたグループ化された入力のみが表示されますが、水平のものを作成することは可能ですか?
css - PureCSS.io メニュー & リーフレット ページの高さ
リーフレットとその上に純粋な水平メニューを 備えたフルスクリーン マップを作成しようとしています。マップの高さを 100% にするためのソリューションを次に示します (親要素も高さ 100% に設定します)。だから今、私はこのようなものを持っています：
CSS
問題は、ページの高さが 100% + メニューの高さです。そのため、マップの一部が下部で切り取られます。Firefox の Inspector を使用して、さまざまな CSS 設定を変更しても無駄でした。また、Firefox の問題を除外するために、さまざまなブラウザーをテストしました。私は何が欠けていますか？残念ながら、私は CSS の専門家ではありません。
JSFiddle を作成しました: http://jsfiddle.net/jygzLf3v/13/
結果ウィンドウはメニューの高さまでスクロールできますが、メニューを含めて「フルスクリーン」にする必要があります。洞察をありがとう。
css - purecss を使用したスティッキー フッター
ページのコンテンツが短くてもフッターがウィンドウの下部に表示されるように、スティッキー フッターを実現したいのですが、コンテンツが長いページでは押し下げられます (このように)。
ページで YUI purecss を使用していますが、ヘッダーの pure-g div が通常のように全幅に拡張されません。
HTML
CSS
追加する必要がある追加の css や、purecss モジュールを使用しながらスティッキー フッターを実現するためのより良い方法はありますか?
css - yui-purecss ボタン内で :after と float:right を使用すると、Firefox で奇妙な動作が発生する
JsFiddle: http://jsfiddle.net/9opb4n03/1/
HTML:
CSS:
ボタンが Chrome、IE、さらには Safari でも期待どおりに表示されることがわかります。ボタン テキストの右側に矢印が表示されます。ただし、Firefox では、ボタン テキストと :after 要素の間に区切りが挿入されます。何か案は？(これは私の初めてのスタック オーバーフロー投稿です。情報を含めるのを忘れていたらお知らせください。)