GitHub などで見られるようなスタイル付きのコード ブロックを作成するために、CSS を pre code
セレクターに適用します。レイアウトに Flexbox を使用しており、「ボックス」 div 内に 2 つの「パネル」 div を並べて配置しており、そのうちの 1 つにはコード ブロックがあります (これは <pre><code> 内のコードにすぎません)。
タグ) であり、「ボックス」 div はメインの「コンテナ」 div 内にあります。
私が持っている基本的なCSSは...
リーリーflex: 0.5
であるため、両方のパネルの幅は同じである必要がありますが、ブロックがパネルに合わせて縮小するのではなく、右側のパネルがブロックに合わせて拡張します。
pre code で
white-space: pre-wrap を設定すると、望ましいレイアウト動作が得られますが、当然ながらコードは折り返されます。これは望ましくないことです。
もちろん、
を使用し、専用の幅を
pre コード に追加すると、コード ブロックに水平スクロールバーが表示される望ましい動作が得られます。ブロックを内部にパネルを収める必要があるため、専用の幅を使用することはできません。
何らかの理由で、プレコード で
width: 100% を設定してもまったく効果がありません。
https://codepen.io/evprkr/pen/poKQXJr
CSS の問題問題が発生している原因:
.*, *:before, *:after { }
の最初の行に、見落としがちな最初の.
(ドット) があります。したがって、border-box
モデルは、:before
および:after
擬似要素でのみ機能します。どうやら、margin
とpadding
にも同じことが当てはまります。.panel
先祖にはwidth
値セットがないため、flexbox は子要素を制約できず、無限に大きくなります。flex: 0.5
(デフォルトはflex: 0.5 1 0%
) は、幅flex-basis:50%
がないため、明らかに効果がありません。どちらの場合も、pre code
はオーバーフローをトリガーしないため、スクロール可能なボックスは表示されません。理由は説明できませんが、おそらく W3C の仕様によるものでしょう。ただし、.panel width: 50%
の宣言により、最終的に問題は解決されました。margin
s をさまざまな要素およびgap
と組み合わせて使用すると、ブラウザ/コードペンのサイズを変更するときに、要素の予期せぬ重なりが生じる可能性があります。上記先頭の.
広告 1) .
(クリック)を削除します。- ad 2)
flexbox- に使用可能な制約を提供します。
ad 3) .panel flex: 0.5 を削除し、 .panel width: calc(50% - 0.5rem)- を指定します。
は要素の全体の幅を増やすため、他の要素と重ならないように要素の幅から左マージンまたは右マージン、あるいはその両方を減算する必要があります。 CSS に余分な
######ボーナス######
.container width: 100%
を指定して、gap
は.panel
の合計幅を増やし、サイズ変更時に重複する可能性があるため、calc(..)
が必要です。ngap: 1rem
は 2 つの列のそれぞれに0.5rem
を追加するため、各列のwidth
からその値を減算する必要があります。4)
ngapと同様、
margincalc(..)
を追加しないようにする最も簡単な方法は、要素のmargin
をその直接の親のpadding
に移動することです。すべてのケースに当てはまるわけではありませんが、この場合は全体のレイアウトを変更しなくてもうまく機能します。応答動作:
.box
がその子要素をラップできるようにします必要最小限の .panel 幅
を設定して、.box- がその子
300px- を選択しました。
これは、ラップを解除したときに
また - ハイフン
リーリー
ああああ
.panel
を強制的にラップします。この場合は.panel
要素を完全な50%
まで拡張できるようにするために必要です。読みやすくするためにテキストを編集します...
######断片######