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

左右のフレックスボックスがあります： .wrapper { display: flex; flex-direction: row; align-items: stretch; width: 100%; height: 70vh; min-height: 325px; max-height:570px; } <div class="wrapper"> <div class="left">Left</div> <div class="right">Right</div> </div> コードスニペットを実行する結果を非表示スニペットを展開 問題は、適切な子供が反応しにくいことです。具体的には、ラッパーの高さいっぱいにしたい。 これを達成する方法？

141 css  flexbox 

ここにあなたのための興味深いCSS質問があります！ 透かしの一種として使用したいテキストをオーバーレイする透明な背景のテキストエリアがあります。テキストは大きく、textareaの大部分を占めます。それは見栄えがよく、問題は、ユーザーがテキスト領域をクリックすると、代わりに透かしテキストが選択される場合があることです。透かしのテキストを選択できないようにしたい。z-indexの値がそれより低いと選択できなくなると思っていましたが、ブラウザーはアイテムを選択するときにz-indexレイヤーを気にしないようです。このDIVを決して選択できないようにするためのトリックまたは方法はありますか？

140 css 

の<div style="display:inline-block">代わりにを使用する理由はありますか<span>てWebページをレイアウトするか？ スパン内にコンテンツをネストできますか？何が有効で何が無効ですか？ これを使用して3x2テーブルのようなレイアウトを作成してもよろしいですか？ <div> <span> content1(divs,p, spans, etc) </span> <span> content2(divs,p, spans, etc) </span> <span> content3(divs,p, spans, etc) </span> </div> <div> <span> content4(divs,p, spans, etc) </span> <span> content5(divs,p, spans, etc) </span> <span> content6(divs,p, spans, etc) </span> </div>

140 css  html 

通常のCSS環境で、固定divが指定された場所に正確に配置される状況があります（top:0px、left:0px）。 translate3d変換を持つ親がいる場合、これは尊重されないようです。私は何かを見ていませんか？スタイルやトランスフォームの元のオプションのような他のwebkit-transformを試しましたが、うまくいきませんでした。 黄色のボックスがコンテナー要素の内部ではなくページの上部隅にあると予想される例をJSFiddleに添付しました。 以下に、フィドルの簡略版を示します。 #outer { position:relative; -webkit-transform:translate3d(0px, 20px , 0px); height: 300px; border: 1px solid #5511FF; padding: 10px; background: rgba(100,180,250, .8); width: 80%; } #middle{ position:relative; border: 1px dotted #445511; height: 300px; padding: 5px; background: rgba(250,10,255, .6); } #inner { position: fixed; top: 0px; box-shadow: 3px 3px 3px #333; …

140 html  css  css-position  css-transforms 

HTMLで250x250pxの画像の中央の50x50pxだけを表示する方法が必要だとしましょう。どうやってやるの。また、css：url（）参照に対してこれを行う方法はありますか？ CSS でクリップを認識していますが、絶対配置で使用した場合にのみ機能するようです。

140 html  css  image 

複数のHTMLページに含まれる共通のヘッダーページとフッターページを作成したいと考えています。 JavaScriptを使用したいのですが。HTMLとJavaScriptのみを使用してこれを行う方法はありますか？ ヘッダーページとフッターページを別のHTMLページ内にロードしたい。

140 javascript  jquery  html  css 

メディアクエリでCSS変数を使用しようとしていますが、機能しません。 :root { --mobile-breakpoint: 642px; } @media (max-width: var(--mobile-breakpoint)) { }

140 css  media-queries  css-variables 

どうしてないのbox-sizing: margin-box;？通常box-sizing: border-box;、スタイルシートに入れるときは、前者を意味します。 例： 2列のページレイアウトがあるとします。両方の列の幅は50％ですが、ガター（中央にギャップ）がないため、見栄えがよくありません。以下はCSSです： .col2 { width: 50%; float: left; } ガターを適用するには、2つの列の最初の列に右マージンを設定するだけでよいと考えるかもしれません。このようなもの： .col2:first-child { margin-right: 24px; } ただし、次のことが当てはまるため、2番目の列が新しい行に折り返されます。 50% + 50% + 24px > 100% box-sizing: margin-box;要素の計算された幅にマージンを含めることにより、この問題を解決します。これは、と同じくらい有用ではないとしても、非常に有用だと思いますbox-sizing: border-box;。

139 css  layout  position  w3c 

高さを固定divしてにdivを追加すると、子divは上から下に表示され、上部の境界に固定されます。 ┌─────────────────────────┐ │ Child Div 1 │ │ Child Div 2 │ │ │ │ │ │ │ └─────────────────────────┘ 私は今、このように下から上に表示しようとしています（下の境界にくっついています）： ┌─────────────────────────┐ │ │ │ │ │ │ │ Child Div 1 │ │ Child Div 2 │ └─────────────────────────┘ ┌─────────────────────────┐ │ │ │ │ │ Child Div 1 │ │ Child …

139 html  css  scrollbar  vertical-alignment  alignment 

サインインとサインアップの2つの基本的なフォームがあります。どちらも同じページにあります。今、私はフォームの自動入力のサインに問題はありません、サインアップフォームの自動入力も同様で、私はそれが好きではありません。 また、フォームスタイルの背景が黄色になり、上書きすることができず、インラインCSSを使用して上書きすることはできません。黄色に着色されないようにするにはどうすればよいですかおよび（おそらく）自動入力？前もって感謝します！

139 html  css  input  autofill 

ラジオボタンの選択したラベルにスタイルを追加したい： HTML： <div class="radio-toolbar"> <label><input type="radio" value="all" checked>All</label> <label><input type="radio" value="false">Open</label> <label><input type="radio" value="true">Archived</label> </div> CSS .radio-toolbar input[type="radio"] {display:none;} .radio-toolbar label { background:Red; border:1px solid green; padding:2px 10px; } .radio-toolbar label + input[type="radio"]:checked { background:pink !important; } 私が間違っていることはありますか？

139 html  css 

Markdownを使用して段落にクラス名を定義できますか？もしそうなら、どうですか？

139 css  markdown 

私は予期しない動作と思われるものを理解しようとしています： max-heightを使用するコンテナー内にmax-heightが100％の要素がありますが、予期せず、子が親からオーバーフローします。 テストケース：http : //jsfiddle.net/bq4Wu/16/ .container { background: blue; padding: 10px; max-height: 200px; max-width: 200px; } img { display: block; max-height: 100%; max-width: 100%; } ただし、親に明示的な高さが指定されている場合、これは修正されています。 テストケース：http : //jsfiddle.net/bq4Wu/17/ .container { height: 200px; } 子供が最初の例で親の最大高さを尊重しない理由を誰かが知っていますか？明示的な高さが必要なのはなぜですか？

139 css 

Bootstrapでスクロール可能なメニューを有効にするために私はこの方法（彼らのフィドル）を試しましたが、そのアプローチでは、スクロール可能なメニューはコンテナーを拡張します- フィドル -非スクロール可能なメニューは正しく、これを行いません。 どうすれば修正できますか？Bootstrapと互換性のある他のアプローチに関する提案も歓迎します！ 参考までに、最初のメソッドのフィドルのHTMLを次に示します。 <ul class="nav"> <li class="dropdown"> <a class="icon-key icon-white" data-toggle="dropdown" href="#" style= "font-weight: bold"></a> <div class="dropdown-menu" style="margin-left: 2em"> <ul class="dropdown-menu"> <!-- static non-scrollable menu header 1 --> </ul> </div> <div class="dropdown-menu" style="margin-left: 2em"> <ul class="dropdown-menu"> <li class="disabled"> <a href="#"><i class="icon-group"></i> <b>My Groups</b></a> </li> <li> <div class="dropdown-menu scroll-menu …

138 css  twitter-bootstrap  scrollable 

パーセンテージサイズのフォントと他のサイズのフォントについては、多くの 記事と質問があります。ただし、パーセント値の参照が何であると想定されているのかわかりません。これは「すべてのブラウザで同じサイズ」であることを理解しています。私もこれを読みました、例えば： パーセント（％）：パーセント単位は「em」単位によく似ており、いくつかの基本的な違いを除けます。何よりもまず、現在のfont-sizeは100％（つまり、12pt = 100％）です。パーセント単位を使用している間、テキストはモバイルデバイスとアクセシビリティのために完全にスケーラブルなままです。 出典：http : //kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ ただし、「ie 12 pt = 100％」と言う場合は、最初にを定義する必要があることを意味しますfont-size: 12pt。それはどのように機能しますか？最初に絶対メジャーでサイズを定義し、次にこれを「100％」と呼びますか？多くのサンプルが次のようにすると便利だと言っているので、あまり意味がありません。 body { font-size: 100%; } だから、これを行うことで、何にフォントサイズの相対的なのですか？画面に表示されるサイズがすべてのフォントで異なることに気づきました。たとえば、ArialはTimes New Romanよりもはるかに大きく見えます。また、これを実行すると、ボディサイズ= 100％になります。つまり、すべてのブラウザで同じになるということですか。または、最初に絶対値を定義した場合のみですか？ 更新、7月23日 到着しましたが、ご容赦ください。 したがって、％の値は、私が正しく理解していれば、デフォルトのブラウザーのフォントサイズに関連しています。それはいいことですが、他にもいくつか質問があります。 この標準サイズはすべてのブラウザーバージョンで常に同じですか、それともバージョン間で異なりますか？ 私 ！Google Chromeの設定が見つかりました（下の画像を参照）（これまでこれを見たことはありません！）。しかし、他のフォントでこれをどのように解釈すればよいですか？私が定義するfont: 100% Georgia;と、ブラウザはどのようなサイズになりますか？セリフの標準サイズを調べますか、それとも「ジョージア」フォントをブラウザの標準サイズにしますか いくつかのウェブサイトで私はのようなものを読みましたSizing text and line-height in ems, with a percentage specified on the body [..], was shown to provide …

138 css  font-size