タグ付けされた質問 「css」

フレックスボックス内のフレックスアイテムの垂直方向のスペースを埋めようとしています。 .container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; } <div class="container"> <div class="flex-1"></div> <div class="flex-2"> <div class="flex-2-child"></div> </div> </div> コードスニペットを実行する結果を非表示スニペットを展開 そして、これがJSFiddleです flex-2-child …

459 css  flexbox 

別のdiv内に2つのdivがあり、1つの子divを親divの右上に配置し、もう1つの子divをcssを使用して親divの下部に配置したいと思います。つまり、2つの子divで絶対配置を使用したいが、ページではなく親divに対して相対的に配置したい。これどうやってするの？ サンプルhtml： <div id="father"> <div id="son1"></div> <div id="son2"></div> </div>

457 html  css 

スタイルとマークアップがあるとします。 ul { white-space: nowrap; overflow-x: visible; overflow-y: hidden; /* added width so it would work in the snippet */ width: 100px; } li { display: inline-block; } <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>1</li> <li>2</li> …

455 html  css  overflow 

MDCページで@ font-face CSSルールを探していますが、 1つ取得できません。太字、斜体、太字+斜体の個別のファイルがあります。3つのファイルすべてを1つの@font-faceルールに埋め込むにはどうすればよいですか？たとえば、私が持っている場合： @font-face { font-family: "DejaVu Sans"; src: url("./fonts/DejaVuSans.ttf") format("ttf"); } strong { font-family: "DejaVu Sans"; font-weight: bold; } ブラウザーは太字に使用するフォントを認識しません（そのファイルはDejaVuSansBold.ttfであるため）。そのため、デフォルトではおそらく必要のないフォントに設定されます。特定のフォントで使用しているさまざまなバリエーションをすべてブラウザに通知するにはどうすればよいですか？

454 fonts  css  font-face 

Googleを使用して、UIとコアの両方のjQuery libをダウンロードすることを計画しています。私の質問は、CSSをダウンロードできるようにするのですか、それとも自分でホストする必要があるのですか？ また、Googleを使用して他のプラグインをロードするにはどうすればよいですか？すべてのプラグインを一緒に圧縮できますか、それとも独自の個別のファイルにする必要がありますか？

452 jquery  css  jquery-ui  cdn  google-ajax-libraries 

私はページ構造を次のようにしています： <div class="parent"> <div class="child-left floatLeft"> </div> <div class="child-right floatLeft"> </div> </div> これで、child-leftDIVのコンテンツが増えるため、parentDIVの高さは子DIVに従って増加します。 しかし、問題はchild-right高さが増えていないことです。親と同じ高さにするにはどうすればよいですか？

450 html  css  layout 

一部のblock要素にボックスシャドウを作成する必要がありますが、（たとえば）要素の右側のみに作成します。私はそれを行う方法を用いて、内側の要素をラップすることであるbox-shadowと外側のいずれかにpadding-right及びoverflow:hidden;影の他の三つの辺が見えないように。 これを達成するためのより良い方法はありますか？好きbox-shadow-right？ 編集：私の意図は、影の垂直部分のみを作成することです。repeat-yルールbackground:url(shadow.png) 100% 0% repeat-yとまったく同じです。

445 css  shadow  box-shadow 

これを可能にする「ライトボックス」タイプのソリューションを探していましたが、まだ見つかりません（ご存知の場合は、提案してください）。 私が再現しようとしている動作は、Pinterestで画像をクリックしたときに表示される動作と同じです。オーバーレイはスクロール可能ですが（オーバーレイ全体がページの上のページのように上に移動するため）、オーバーレイの後ろの本体は固定されています。 私はこれをCSSだけで作成しようとしました（つまり、divページ全体の上にオーバーレイし、で本文を重ねますoverflow: hidden）が、divスクロール可能になるのを妨げません。 本文/ページがスクロールしないようにしながら、フルスクリーンコンテナー内でスクロールし続けるにはどうすればよいですか？

445 css  overlay  lightbox 

（ページの他のすべてのコンテンツを手動で無効にすることなく）指定されたdivを印刷するにはどうすればよいですか？ 新しいプレビューダイアログを避けたいので、このコンテンツで新しいウィンドウを作成しても役に立ちません。 このページにはいくつかのテーブルが含まれており、そのうちの1つには印刷したいdivが含まれています。

444 javascript  css  printing  dhtml 

要素の右側から特定のピクセル数だけ背景画像を配置する方法はありますか？ たとえば、何かを左から特定の数のピクセル（たとえば、10）に配置するには、次のようにします。 #myElement { background-position: 10px 0; }

443 css 

CSSトランジションを使用して、ページの読み込み時にテキスト段落をフェードインできますか？ 私はそれがhttp://dotmailapp.com/でどのように見えるか本当に気に入っており、CSSを使用して同様の効果を使用したいと思います。このドメインは購入されており、言及された効果はありません。アーカイブされたコピーは、Wayback Machineで表示できます。 図 このマークアップがある： <div id="test"> <p>​This is a test</p> </div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 次のCSSルールの場合： #test p { opacity: 0; margin-top: 25px; font-size: 21px; text-align: center; -webkit-transition: opacity 2s ease-in; -moz-transition: opacity 2s ease-in; -o-transition: opacity 2s ease-in; -ms-transition: opacity 2s ease-in; transition: opacity 2s ease-in; }​ ロード時に遷移をトリガーするにはどうすればよいですか？

442 css  css-transitions  opacity 

2つのdivが並んでいます。それらの高さを同じにして、そのうちの1つがサイズ変更しても同じままにしたいです。私はこれを理解することはできません。アイデア？ 混乱を招く質問を明確にするために、両方のボックスを常に同じサイズにしたいので、テキストが配置されたために1つが大きくなった場合、もう1つは高さに合わせて大きくする必要があります。 <div style="overflow: hidden"> <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px"> Some content!<br/> Some content!<br/> Some content!<br/> Some content!<br/> Some content!<br/> </div> <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px"> Some content! </div> </div> コードスニペットを実行する結果を非表示スニペットを展開

441 html  css  html-table  flexbox 

オンラインでフォントの試用を必要とするWebサイトで作業しています。使用しているフォントはすべて.otfです。 フォントを埋め込み、すべてのブラウザで機能させる方法はありますか？ そうでない場合、他にどのような選択肢がありますか？

440 html  css  fonts  font-face 

Webページを印刷するためのリンクがWebページにあります。ただし、リンクはプリントアウト自体にも表示されます。 印刷リンクをクリックしたときにリンクボタンを非表示にするJavaScriptまたはHTMLコードはありますか？ 例： "Good Evening" Print (click Here To Print) 「Good Evening」というテキストを印刷するときに、この「Print」ラベルを非表示にしたい。「印刷」ラベルは、印刷物自体には表示されません。

440 css  printing 

ブートストラップ「モーダル」をいくつか使用して、ブートストラップのウェブサイトを作成しています。一部のデフォルト機能をカスタマイズしようとしています。 問題はこれです。背景をクリックしてモーダルを閉じることができます。この機能を無効にする方法はありますか？特定のモーダルのみ？ ブートストラップモーダルページ

440 javascript  css  twitter-bootstrap  modal-dialog